layui form表单 动态添加、删除input框，以及数据回显

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">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 =  '
'+
                ''+
                '
'+
                    ''+
                '
'+
                '
'+
                    ''+
                '
'+
            '
';

            $("#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 =  '
'+
                ''+
                '
'+
                '+json+'" class="layui-input input-double-width">'+
                '
'+
                '
'+
                ''+
                '
'+
                '
';
            $("#last").append(str);
        }

        x=i+1;
    });
  })
</script>