动态表单增删行（事件委托、事件代理）

动态表单增删行用到了事件委托（也叫事件代理）与选择父类的方法
jQuery parents() 方法 菜鸟是这样说的

简单描述一下
定义一个amount初始化为1（最少保留一行嘛），跟下面的if相对应
delegate 翻译v. 授（权），把……委托给他人；委派……为代表，任命
用法很简单

$(“父元素”).delegate(“触发的元素”,“click”,function(){
定义你自己要写的操作；
});

菜鸟教程

<fieldset class="layui-elem-field">
    <legend>其他必须字段</legend>
    <div class="layui-field-box">
        <div id="add_box">
            <div class="diy layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg4">
                    <label class="layui-form-label">字段名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="column_name[]" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label">字段代码</label>
                    <div class="layui-input-block">
                        <input type="text" name="column_code[]" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <a class="layui-btn add">增加</a>
                        <a class="layui-btn del">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

js代码如下

$("#add_box").delegate('.add','click',function () {
    $("#add_box").append(`
             <div class="diy layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg4">
                    <label class="layui-form-label">字段名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="column_name[]" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label">字段代码</label>
                    <div class="layui-input-block">
                        <input type="text" name="column_code[]" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-lg4">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <a class="layui-btn add">增加</a>
                        <a class="layui-btn del">删除</a>
                    </div>
                </div>
            </div>
        `)
});
$("#add_box").delegate(".del","click",function(){
    if($(".diy").length>1){
        $(this).parents('.diy').remove();
    }
});