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> <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>
JS实现动态添加和删除div的更多相关文章
- jQuery实现动态添加和删除一个div
本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- js动态添加和删除标签
html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
随机推荐
- java.lang.NoClassDefFoundError: org/apache/zookeeper/proto/SetWatches
Session 0x16b21fa441900b6 for server 192.168.240.126/192.168.240.126:2181, unexpected error, closing ...
- C 语言程序设计
C 语言数据类型: 整数: char(也是字符型) short int long 浮点型: float double 指针 自定义类型 输入输出格式化: int ->%d long ->% ...
- learning java java.time相关类
var clock = Clock.systemUTC(); System.out.println(clock.instant()); System.out.println(clock.millis( ...
- leetcode 63 简单题
题目很水... 直接放代码了 int uniquePathsWithObstacles(int** obstacleGrid, int obstacleGridRowSize, int obstacl ...
- (1)React的开发
1.React项目架构搭建 2.JSX语法 3.React组件化开发 4.React组件间通信 5.React中的事件 6.React代码优化 7.React中组件的样式修饰 React简介及基础语法 ...
- Ring3挂起进程,跟恢复进程.
目录 Ring3挂起进程,跟恢复进程. 一丶简介 二丶代码 Ring3挂起进程,跟恢复进程. 一丶简介 有时候我们做对抗的时候可能会遇到.一个进程常常操作我们.但是我们 可以通过挂起进程来挂起它让它无 ...
- 2019.11.11 模拟赛 T2 乘积求和
昨天 ych 的膜你赛,这道题我 O ( n4 ) 暴力拿了 60 pts. 这道题的做法还挺妙的,我搞了将近一天呢qwq 题解 60 pts 根据题目给出的式子,四层 for 循环暴力枚举统计答案即 ...
- 乌班图下fluent开启并行报错的解决方法
参考链接: CFD-online原帖:http://www.cfd-online.com/Forums/fluent/149668-fluent-16-0-0-ubuntu-12-04-a.html ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- etcd安装
etcd有三种集群化启动的配置方案,分别为静态配置启动.etcd自身服务发现.通过DNS进行服务发现,重点讲一下静态配置启动.根据启动环境,可以选择不同的配置方式.这也是新版etcd区别于旧版的一大特 ...