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" οnclick="add_div()">添加明细</button>
<button type="button" class="button btn-light" id="del-btn" οnclick="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" οnclick="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 + '" οnclick="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 + '" οnclick="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>' // // 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>
转载于:https://www.cnblogs.com/jxldjsn/p/10895049.html
JS实现动态添加和删除div相关推荐
- 原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素 动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- 原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...
- js实现简单的动态添加或删除一行数据
实现代码如下: <script type="text/javascript"> $(function(){ // 动态添加(此处未加样式图片路径等) //var li= ...
- layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
- JSP中动态添加或删除table的行
个 想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击"环节参与人员"空白栏时弹出组织结构人员树时的弹窗功能) HTML部分: <body ><di ...
- html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号 捆包号 品名 规格 材质 重量 业务需求是,从后台获取到订单 ...
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(推荐七)
前言 学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
最新文章
- Oracle 导出表结构
- 隐藏在管理员登录页面的危险
- 垃圾回收器如何确定哪些对象要回收---《深入理解java虚拟机》
- raster | R中的栅格操作符(下)[翻译]
- 非对称网络不通 子网掩码是“祸首”
- 文都计算机统考讲义,考研计算机文都基础班讲义.doc
- 深度学习入门者选择开源框架丨硬创公开课群友问答
- zend studio12配置php,Zend Studio 12.0调试php代码
- 计算机音乐谱策马奔腾,策马奔腾简谱
- 基于SPH的流体仿真过程
- 程序员必备:Git入门,超详细
- 何恺明的ResNet引用量突破10万!
- K8S集群中Node节点资源不足导致Pod无法运行的故障排查思路
- 为什么有些人赚钱那么容易,有些人却赚不到钱?
- hive报错 spark_Spark是否能替代Hive
- linux命令行连接wifi RTL810xE PCI Express Fast Ethernet Controller 网卡
- 为诺亚方舟实验室,1亿组图文对,填补中文开源多模态数据集空白
- Packet Tracer - 配置初始路由器设置
- 国外程序员整理的系统管理员资源大全
- 给有兴趣、有责任要讲课、分享的朋友推荐两本书