Как добавить динамический div в bootstrap?

Question

Я использовал следующий способ добавить несколько DIV на кнопку «AddButton», как указано ниже, в скрипку:

http://jsfiddle.net/harshmadhani/jpb93/

$(document).ready(function() { 
var counter = 2; 
$("#addButton").click(function() { 
     if (counter > 2) { 
      alert("Only 2 textboxes allowed"); 
      return false; 
     } 
     $('<div/>',{'id':'TextBoxDiv' + counter}).html(
      $('<label/>').html('Textbox #' + counter + ' : ') 
     ) 
     .append($('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter})) 
     .appendTo('#TextBoxesGroup')  
     counter++; 
    }); 

    $("#removeButton").click(function() { 
     if (counter == 1) { 
      alert("No more textbox to remove"); 
      return false; 
     } 
     counter--; 
     $("#TextBoxDiv" + counter).remove(); 
    }); 
}); 

Я должен добавить текст с помощью HTML и добавить его в дальнейшем. Есть ли другой способ решить эту проблему в Bootstrap?

Answer 1

Попробуйте

http://jsfiddle.net/jpb93/3/

HTML

<div class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label" for="inputEmail"> 
       Email</label> 
      <div class="controls"> 
       <input type="text" id="inputEmail" placeholder="Email" /> 
       </div> 
     </div> 
    </div> 

JQuery:

$(document).ready(function() { 

      $("#addButton").click(function() { 
       if(($('.form-horizontal .control-group').length+1) > 2) { 
        alert("Only 2 control-group allowed"); 
        return false; 
       } 
       var id = ($('.form-horizontal .control-group').length + 1).toString(); 
       $('.form-horizontal').append('<div class="control-group" id="control-group' + id + '"><label class="control-label" for="inputEmail' + id + '">Email' + id + '</label><div class="controls' + id + '"><input type="text" id="inputEmail' + id + '" placeholder="Email"></div></div>'); 
      }); 

      $("#removeButton").click(function() { 
       if ($('.form-horizontal .control-group').length == 1) { 
        alert("No more textbox to remove"); 
        return false; 
       } 

       $(".form-horizontal .control-group:last").remove(); 
      }); 
     });