layui 表单动态添加、删除input框

作者: admin 分类: 网页前端 发布时间: 2022-11-21 15:23

样板图:

<div class="layui-form-item" >
    <label class="layui-form-label">路线</label>
    <div class="layui-input-block" id="last">
        <div class="layui-input-inline">
            {empty name="$ways"}
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="ways[]" placeholder="请输入"
                        autocomplete="off" class="form-control" style="width: 200%;">
                </div>
                <div class="layui-input-block" style="margin-left: 480px">
                    <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>
            {else /}
            <!-- 循环列出数据 -->
            {volist name="ways" id="vo"}
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="ways[]" lay-verify="required" value="{$vo.name}"
                        class="form-control" style="width: 200%;">
                </div>
                <div class="layui-input-block" style="margin-left: 480px">
                    <button type="button"
                        class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i
                            class="layui-icon">&#xe67e;</i></button>
                </div>
            </div>
            {/volist}
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="ways[]" placeholder="请输入"
                        autocomplete="off" class="form-control" style="width: 200%;">
                </div>
                <div class="layui-input-block" style="margin-left: 480px">
                    <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
            </div>
            {/empty}
        </div>

    </div>
</div>

js部分:

layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () {
    var form = layui.form
        , element = layui.element
        , laydate = layui.laydate
        , $ = layui.$;

    //动态添加input输入框
    $("#add").click(function () {
        var str = '<div class="layui-form-item">' +
            '<div class="layui-input-inline">' +
            '<input type="text" name="ways[]" lay-verify="required"' +
            'class="form-control" style="width: 200%;">' +
            '</div>' +
            '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
            '</div>' +
            '</div>';

        $("#last").append(str);
        x++;
    });

    //删除动态添加的input输入框
    $("body").on('click', ".removeclass", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent();
        parentEle.remove();
    });
})

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

标签云