JS實現動態添加和刪除div

實現方式一：只在最后一個數據中動態添加或者刪除

| 背景
需要做一個頁面，頁面可以輸入參數，點擊確認按鈕可以發請求給某接口。但是接口的某個字段是數組類型，所以在頁面上需要實現添加或者刪除元素的功能。

| 實現
| 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>

效果
如圖

 

 

實現方式二：只在最后一個數據中動態添加，刪除任意一個節點

html代碼

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

    </div>
    <div class="form-group" id="details">
        <div class="form-inline" id="ddd">
            <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>

        <hr style="border: 1px solid #f9c37b;width: 100%; margin-bottom: 10px;margin-top: 10px">

    </div>
</form>

js代碼

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

        var del = document.createElement('p')
        del.innerHTML = '<button type="button" class="button btn-light" id="del-btn' + detail_div + '" onclick="del_div(this.id)">刪除明細</button>';
        div.children.ddd.appendChild(del);
        // div.getElementById('ddd').appendChild(del);

        // var bu = document.createElement('p')
        //
        //
        // bu.innerHTML = '<button type="button" class="button btn-light" id="del-btn' + detail_div + '" onclick="del_div(this.id)">刪除明細</button>';
        //
        // // tr.innerHTML = '<td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a>&nbsp;&nbsp;<a href="javascript:;">刪除</a></td>'
        // // document.getElementById('myBody').appendChild(tr)
        //
        // div.appendChild(bu);
        // div.lastElementChild.id = "del-btn" + detail_div;
        document.getElementById("form").appendChild(div);
        detail_div++;
    }

    function del_div(eleId) {
        debugger;
        var eeid = document.getElementById(eleId).parentNode.parentNode.parentNode.id;
        var ee = document.getElementById(eeid);
        document.getElementById("form").removeChild(ee);

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