如何在bootstrap中添加动态div？

Question

我使用以下方法在点击"addButton"时添加多个div,如下面的小提琴所示:

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();
            });
        });