jquery - ブートストラップに動的divを追加するには?

Question

以下の fiddle に示すように、次の方法を使用して、「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();
            });
        });