动态增行删行操作

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

动态增行删行操作

如下图所示，默认只展示一行，右侧有删除和添加按钮，点击删除删除当前行，点击添加在当前行下面添加新的一行
默认：

添加两行以后：

删除一行以后

主要是通过id拿到整体的div，在div后面进行添加
代码如下：
html

<div class="layui-form-item dividingLine">
            <label class="layui-form-label dividingSpan">汇总表头区域</label>
            <div class="sheetLabel" style="margin-left: 108px">
                <div class="sheetLabel1" id="sheet">
                    <span style="margin-bottom: 16px;display: inline-block;">sheet1</span>
                    <input type="text" name="title" required="" lay-verify="required" placeholder="A1" autocomplete="off" class="layui-input sheetInput">
                    <span>:</span>
                    <input type="text" name="title" required="" lay-verify="required" placeholder="F3" autocomplete="off" class="layui-input sheetInput">
                    <img id="close" class="fileClose" src="../image/fileClose.png" onclick="removeSheet(this)"/>
                    <img id="add" class="fileAdd" src="../image/fileadd.png" onclick="addSheet(this)"/>
                </div>
            </div>
        </div>

js:

var Identification =1;
        function addSheet(val){
            var rootEle = val.parentElement;
            var rootId = document.getElementById(rootEle.id);
            var newSheet=document.createElement("div");     
            newSheet.class= "layui-input-block";
            newSheet.id = "college"+ Identification;
            //拿到删除按钮的id并加1
            var deletename=rootId.childNodes[9].id+1;
            //将现有的divhtml赋值给新创建的div
            newSheet.innerHTML=rootId.innerHTML;
            document.getElementsByClassName("sheetLabel")[0].appendChild(newSheet);
            //给新的div的删除按钮赋值（动态加1）
            newSheet.childNodes[9].id=deletename;
            Identification++;
        }
        function removeSheet(val){  
            //获取本删除按钮的id值，并创建对象
            var strid = val.id;
            var content = document.getElementById(strid);
            var rootContent = content.parentElement;
            //找到这个删除按钮对应的父div的值
            var rootId = rootContent.id;
            //判断本id对应的值并删除
            var root = document.getElementById(rootId);
            if (root != null){
                root.parentNode.removeChild(root);
            }
        }

参考链接：https://blog.csdn.net/cfl20121314/article/details/17092615