JS实现动态添加和删除div

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/amoscn/article/details/83507812

| 背景

需要做一个页面，页面可以输入参数，点击确认按钮可以发请求给某接口。但是接口的某个字段是数组类型，所以在页面上需要实现添加或者删除元素的功能。

| 实现

| html

前端是基于bootstrap4.0.

        <form id="form" role="form" method="post" class="custom-control">
                <div class="form-inline">
                <label for="details" class="custom-control-label col-md-2">还款明细</label>
                <button type="button" class="button btn-light" id="add-btn" onclick="add_div()">添加明细</button>
                <button type="button" class="button btn-light" id="del-btn" onclick="del_div()">删除明细</button>
            </div>
            <div class="form-group" id="details">
                <div class="form-inline">
                    <label for="receivable" class="custom-control-label col-md-3">应收金额</label>
                    <input type="text" class="form-control" id="receivable" value="" placeholder="应收金额 单位分"/>
                </div>
                <div class="form-inline">
                    <label for="period" class="custom-control-label col-md-3">还款期数</label>
                    <input type="text" class="form-control" id="period" value="" placeholder="还款期数"/>
                </div>
                <div class="form-inline">
                    <label for="kind" class="custom-control-label col-md-3">还款科目</label>
                    <input type="text" class="form-control" id="kind" value="" placeholder="还款科目"/>
                </div>
            </div>
        </form>

|JS

<script type="text/javascript">
    var detail_div = 1;
    function add_div() {
        var e = document.getElementById("details");
        var div = document.createElement("div");
        div.className = "form-group";
        div.id = "details" + detail_div;
        div.innerHTML = e.innerHTML;
        document.getElementById("form").appendChild(div);
        detail_div++;
    }

    function del_div() {
        var id = "details" + (detail_div - 1).toString();
        var e = document.getElementById(id);
        document.getElementById("form").removeChild(e);
        detail_div--;
    }
</script>

效果

如图

| 参考

感谢！
CraftsmanChen - JS实现动态添加和删除DIV
和他的写法还是有差异的，大家可以对比着看。