JS实现动态添加和删除div（基于bootstrap）

Myth丶恋晨 2022-05-15 13:57 522阅读 0赞

## 背景 ##

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

## 实现 ##

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

### 效果 ###

如图  
![实现效果][2018102916193475.gif]

## 参考 ##

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

**如果觉得有用，请点赞支持。**

[2018102916193475.gif]: /images/20220503/3ef7e34d5eb845baa46a03121635f695.png
[CraftsmanChen - JS_DIV]: https://blog.csdn.net/cfl20121314/article/details/17092615

发表评论取消回复

表情：

评论列表（有 0 条评论，522人围观）

还没有评论，来说两句吧...

相关阅读

相关 js动态增加，删除td，tr，table，div

js实现的动态添加，删除table内容：截图如下： 1. ![SouthEast][] 2. ![SouthEast 1][] 源代码： main.css

川长思鸟来/ 2024年02月17日 14:15/ 0 赞/ 58 阅读

相关原生js实现添加和删除class

前言：对于习惯jquery的写法以后对于原生总是不适应，实际原生中也是有直接简单的方法的。 1、添加class 添加：节点.classList.add("

╰+攻爆jí腚メ/ 2022年09月12日 11:46/ 0 赞/ 202 阅读

相关 js实现添加删除表格

效果: 1、点击添加按钮往table中添加一行将全选前面的复选框变成false 1.1 、当前新增的复选框加上点击事件 2、点击删除按钮获

本是古典何须时尚/ 2022年08月28日 08:57/ 0 赞/ 246 阅读

相关 js实现div动态改变大小

网上看到的相关代码，记下，以备日后使用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

痛定思痛。/ 2022年08月20日 06:09/ 0 赞/ 373 阅读

相关 js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select>

系统管理员/ 2022年06月11日 02:45/ 0 赞/ 305 阅读

相关 JS实现动态添加和删除div（基于bootstrap）

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

Myth丶恋晨/ 2022年05月15日 13:57/ 0 赞/ 523 阅读

相关 Js实现表格的删除和添加效果

一、需要实现table 的行添加和删除功能。这个主要分为两块： 1、添加：这个比较简单就是在指定的标签位置插入我们需要的HTML代码段。 2、删除：删除

偏执的太偏执、/ 2022年05月14日 03:25/ 0 赞/ 245 阅读

相关 bootstrap基于JS动态添加、删除、获取input输入框

这段代码支持动态添加、删除，bootstrap里面还有更简单的实现动态效果，我这里是需要做一些特殊的处理才使用这样的方式的，复制粘贴的时候记得把<div>里面的代码改了。

「爱情、让人受尽委屈。」/ 2022年05月13日 08:08/ 0 赞/ 1057 阅读

相关 bootstrap基于JS动态显示表单

HTML代码： <input type="button" id="btn" value="点击切换发送方式" style="background:BAE2E8

我会带着你远行/ 2022年05月13日 08:04/ 0 赞/ 357 阅读

相关 js 动态添加和删除class

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] el.classList.remove("fad

╰半橙微兮°/ 2022年01月16日 04:53/ 0 赞/ 377 阅读