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

样板图:

在这里插入图片描述

html部分
<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();
    });
})
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
动态添加表单元素可以使用layui的form模块中的`form.render()`方法,具体步骤如下: 1. 给添加按钮绑定点击事件,点击时执行添加操作。 2. 在添加操作中,先获取已有的表单元素数量,然后通过jQuery或原生js动态创建一个新的表单元素,例如: ```html <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-block"> <input type="text" name="name[]" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"> </div> </div> ``` 3. 将新创建的表单元素添加表单中,并调用`form.render()`方法进行渲染,例如: ```js // 添加操作 $("#addBtn").click(function() { var count = $("input[name='name[]']").length; var html = '<div class="layui-form-item"><label class="layui-form-label">名称</label><div class="layui-input-block"><input type="text" name="name[]" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"></div></div>'; $(".layui-form").append(html); form.render(); }); ``` 动态删除表单元素可以使用jQuery或原生js的`remove()`方法,例如: ```js // 删除操作 $(".delete-btn").click(function() { $(this).parents(".layui-form-item").remove(); form.render(); }); ``` 其中,`.delete-btn`是删除按钮的类名,通过`parents(".layui-form-item")`方法找到需要删除表单元素的父级元素。删除后记得调用`form.render()`方法重新渲染表单
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值