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 = ElementById("details");
var div = ateElement("div");
div.className = "form-group";
div.id = "details" + detail_div;
div.innerHTML = e.innerHTML;
detail_div++;
}
function del_div() {
var id = "details" + (detail_div - 1).toString();
var e = ElementById(id);
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 >
</div>
</form>
js代码
<script type="text/javascript">
var detail_div = 1;
function add_div() {
debugger;
var e = ElementById("details");
var div = ateElement("div");
div.className = "form-group";
div.id = "details" + detail_div;
div.innerHTML = e.innerHTML;
var del = ateElement('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);
// ElementById('ddd').appendChild(del);
// var bu = ateElement('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>  <a href="javascript:;">删除</a></td>'        // // ElementById('myBody').appendChild(tr)
//
js教程removechild// div.appendChild(bu);
// div.lastElementChild.id = "del-btn" + detail_div;
detail_div++;
}
function del_div(eleId) {
debugger;
var eeid = ElementById(eleId).parentNode.parentNode.parentNode.id;
var ee = ElementById(eeid);
// var id = "details" + (detail_div - 1).toString();
// var e = ElementById(id);
// ElementById("form").removeChild(e);
// detail_div--;
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。