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"><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----------