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"><iclass="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();}); })

layui form表單 動態添加、刪除input框，以及數據回顯
在form表單中，動態增加input框，最多添加5個，刪除校驗

html代碼

<form class="layui-form" th:action="@{/basicInfo/update/project}" method="post"><div class="layui-form-item" id="last"><label class="layui-form-label">開發項目核準名</label><div class="layui-input-inline"><input type="text" id="projectApprovalName" name="projectApprovalName" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input input-double-width"><input class="layui-input" type="hidden" id="id" name="id" th:value="${estateInfo.id}"></div><div class="layui-input-inline" style="margin-left: 180px"><button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div><span class="layui-word-aux">備注：最多添加5個項目核準名，每個長度為2-15個字符</span></div> </form>

js代碼

<script type="text/javascript" th:inline="javascript">layui.use([ 'layer', 'upload'], function () {var $ = layui.jquery;var layer = layui.layer; //加載layer模塊var upload = layui.upload; //加載upload模塊var id = $("#id").val();var basePath=[[${#httpServletRequest.getContextPath()}]];//動態添加input輸入框var max = 5;var x = 1;$("#add").click(function(){if(x<max){var str = '<div class="layui-form-item">'+'<label class="layui-form-label"></label>'+'<div class="layui-input-inline">'+'<input type="text" name="projectApprovalName" class="layui-input input-double-width">'+'</div>'+'<div class="layui-input-inline" style="margin-left: 180px">'+'<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++;}else {layer.msg("最多添加5條信息",{icon:2});}});//刪除動態添加的input輸入框$("body").on('click',".removeclass",function(){if(x>1){//元素移除前校驗是否被引用var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();var parentEle = $(this).parent().parent();$.ajax({url:basePath+'/basicInfo/findByApprovalNameAndEstateId',type:"get",data:{'id':id,'projectApprovalName':approvalName},dataType:"json",success:function(res){if(res.code!==200){layer.msg('項目核準名 '+approvalName+' 已被引用，禁止刪除', {icon: 2, title:'提示'});}else {//移除父元素parentEle.remove();x--;}}});}});//動態回顯input值var approvalNameStr = [[${estateInfo.projectApprovalName}]];var approvalNameArr = approvalNameStr.split(',');$.each(approvalNameArr,function (i,json) {if(i===0){$("#projectApprovalName").val(json);}if(i>0){var str = '<div class="layui-form-item">'+'<label class="layui-form-label"></label>'+'<div class="layui-input-inline">'+'<input type="text" name="projectApprovalName" value="'+json+'" class="layui-input input-double-width">'+'</div>'+'<div class="layui-input-inline" style="margin-left: 180px">'+'<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=i+1;});}) </script>

----------------------------------------------------------------------自己的項目--------------------------------------------------------------------------

<div class="layui-form-item" ><label class="layui-form-label" style="width: 90px;">服務器ip端口</label><div class="layui-input-block" id="last2"><div class="layui-input-inline"><div class="layui-form-item"><div class="layui-input-inline" style="width: 151px;!important;" ><input type="text" name="ways[]"class="layui-input" required lay-verify="required" autocomplete="off" class="form-control" style="width: 200%;"></div><div class="layui-input-block" style="margin-left: 310px"><button id="add2" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div></div></div></div></div> //layui 表單動態添加、刪除input框 ---start//動態添加input輸入框var x = 1;$("#add2").click(function () {var str = '<div class="layui-form-item" style="margin-left: 10px;" > ' +'<div class="layui-input-inline" style="width: 151px;!important;">' +'<input type="text" name="ways[]" lay-verify="required"' +'class="form-control layui-input" style="width: 200%;" >' +'</div>' +'<div class="layui-input-block" style="margin-left: 310px">' +'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +'</div>' +'</div>';$("#last2").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();});//---------end----------

總結

以上是生活随笔為你收集整理的layui 表单动态添加、删除input框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。