jquery动态增加删除多个div

项目上有的一个小需求，动态的增加和删除div，百度了一下都没看到

下面的效果图

下面是代码

<div id="appendDevelopmentNumber">

</div>



//添加

function addDevelopmentNumber() {

    $("#appendDevelopmentNumber").append('<div class="row">\n' +

        '                        <div class="form-group">\n' +

        '                            <label class="col-sm-4 control-label"></label>\n' +

        '                            <input name="developmentNumber" data-role="maskedtextbox" type="text" style="width:100px;"\n' +

        '                                   data-bind="value:model.developmentNumber"  class="k-textbox"/>\n' +

        '                            <input name="developmentNumber" data-role="maskedtextbox" type="text" style="width:180px;"\n' +

        '                                   data-bind="value:model.developmentNumber"  class="k-textbox"/>\n' +

        '                            <button type="button" class="btn btn-default" aria-label="Left Align" onclick="addDevelopmentNumber()">\n' +

        '                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>\n' +

        '                            </button>\n' +

        '                            <button type="button" class="btn btn-default" aria-label="Left Align" onclick="delDevelopmentNumber(this)">\n' +

        '                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>\n' +

        '                            </button>\n' +

        '                        </div>\n' +

        '                    </div>');

}



//移除

function delDevelopmentNumber(e) {

    console.info(e);

    console.info($(e).parent().parent());

    $(e).parent().parent().remove();

}