怎么删除连自己在内的节点？

Question

默认情况下显示一组参数名称与参数值：

点击添加后执行如下方法：

            $(function(){
                //添加一组参数
                var parameterWarp = $('.page-table-group');
                var i = 0;
                var parameterChildren = `<div class="page-row parameter-row cut">
                        <div class="group"><label for="parametersName">参数名称：</label><input type="text" class="form-control" id="parametersName" /></div>
                        <div class="group"><label for="parametersValue">参数值：</label><input type="text" class="form-control" id="parametersValue" /></div>
                        <div class="cut-item"></div>
                    </div>`;
                
                $('.add-item').click(function(){
                    parameterWarp.append(parameterChildren);
                });
            });

新增节点正常：

此时想依次逐个删除，下面的方法却不执行，是什么原因呢？

                $('.cut-item').click(function(){
                    $(this).parent('.cut').remove();
                });

求帮忙一下，搞不懂什么原因。

Answer 1

使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
这样呢

 $('.cut-item').on('click', function(){
    $(this).parent('.cut').remove();
});