jquery动态添加删除form元素

效果图：

点击+，在其后会添加一条记录，点击-，会删除-号所在的记录

html：

<div class="form-group">
        <label class="col-sm-2 control-label">分集名称：</label>
        <div class="col-sm-3">
            <input th:name="name" class="form-control">
        </div>
        <label class="col-sm-2 control-label">节目文件：</label>
        <input class="col-sm-1" name="file1" type="file" value="选择" size="20" id="file11" onchange
                    ="uploadVideo('Video')">
        <button type="button" class="add_node btn btn-primary">+</button>
 </div>

js：

$(function () {
    $(document).on("click",".add_node",function () {
        $node ='<div class="form-group">\n' +
            '                            <label class="col-sm-2 control-label">分集名称：</label>\n' +
            '                            <div class="col-sm-3">\n' +
            '                                <input th:name="name" class="form-control">\n' +
            '                            </div>\n' +
            '                            <label class="col-sm-2 control-label">节目文件：</label>\n' +
            '                            <input name="file1" class="col-sm-1" type="file" value="选择" size="20" id="file11" onchange\n' +
            '                                        ="uploadVideo(\'Video\')">\n' +
            '<button type="button"  class="add_node btn btn-primary" >+</button>'+
            '                            <button type="button" class="del_node btn btn-warning" >-</button>\n' +
            '                        </div>';

        $(this).parent().after($node);
    });
    $(document).on("click",".del_node",function(){
        $(this).parent().remove();
    })
});

ps：jquery生成html标签时无法再通过jquery去获取,需要用on来绑定。

$(document).on("click",'.add_node',function(){//需要这样写 });