js增加标签（增加元素）和删除标签（删除元素）

效果图：（我用的是layui框架）

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>增加标签</title></head><body><!-- 增加时间段的设计 --><div class="quantum"><div class="layui-form-item"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required" class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动开始时间</div><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required" class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动结束时间</div></div></div><button type="button" class="layui-btn layui-btn-normal left" id="add">增加时间规则</button><button type="button" class="layui-btn layui-btn-danger" id="reduce">删除时间规则</button><br><br></body>
</html>

js代码：

<!-- 增加时间段js -->
<script>var number = 0;var maximum = document.querySelector('.quantum'); //找到最大的divvar add = document.querySelector('#add'); //找到第三个第一个按钮add.onclick = function() {var newly = document.createElement('div');maximum.appendChild(newly);number++;newly.innerHTML =`<div class="layui-form-item"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required"class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动开始时间</div><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required"class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动结束时间</div></div> `;}var reduce = document.querySelector('#reduce'); //找到最后一个按钮reduce.onclick = function() {var last = maximum.lastElementChild;maximum.removeChild(last); //删除节点}
</script>

这样成功了.....解释一下 ``（反撇）这个符号，可以将我们平时写的html内容直接写进去，非常的方便，他就是tab键上面那个键，英文格式点击一下就出来了

上面是无限增加，下面设置增到最大限制

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>增加标签</title></head><body><!-- 增加时间段的设计 --><div class="quantum"><div class="layui-form-item"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required" class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动开始时间</div><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required" class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动结束时间</div></div></div><button type="button" class="layui-btn layui-btn-normal left" id="add">增加时间规则</button><button type="button" class="layui-btn layui-btn-danger" id="reduce">删除时间规则</button><br><br></body>
</html>

js代码：

<script>var poll = $("#poll");//写隐藏input框默认值为1 $(function () {var alls = "3";//最大到三个if (poll.val() == 1) {document.getElementById("reducenumber").disabled = true;}if (poll.val() == alls) {document.getElementById("addnumber").disabled = true;}$("#addnumber").click(function () {poll.val(parseInt(poll.val()) + 1);if (poll.val() > alls) {poll.val(parseInt(poll.val()) - 1);}if (poll.val() == alls) {document.getElementById("addnumber").disabled = true;}document.getElementById("reducenumber").disabled = false;addgroup() //执行增加分组函数});$("#reducenumber").click(function () {poll.val(parseInt(poll.val()) - 1); //点击减号输入框数值减1if (poll.val() <= 0) {poll.val(parseInt(poll.val()) + 1); //最小值为1}if (poll.val() == 1) {//当我票数框内为1的时候我的减票就不可以使用了document.getElementById("reducenumber").disabled = true;}document.getElementById("addnumber").disabled = false;reducegroup(); //执行减少分组函数});});var number = 0; //声明一个变量为0 //下面用到为了区分name值这里使用var maximum = document.querySelector('.quantum'); //找到最大的divfunction addgroup() {//声明增加分组函数var newly = document.createElement('div'); //声明增加的标签是什么maximum.appendChild(newly); //声明在那个标签里面增加number++; //数字增加1 //方便input框的name值不一样newly.innerHTML =`<div class="layui-form-item"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="time" name="brgin[]" value="" placeholder="设置开始时间" required="required"class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动开始时间</div><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="time" name="finish[]" value="" placeholder="设置结束时间" required="required"class="layui-input"></div><div class="layui-form-mid layui-word-aux">设置活动结束时间</div></div> `;//所要增加的内容}function reducegroup() {//声明减少一个分组的函数var last = maximum.lastElementChild; //查找maximum中最后的一个divmaximum.removeChild(last); //删除节点}
</script>

js增加标签（增加元素）和删除标签（删除元素）相关推荐

js中增加标签删除标签和input修改获取内容
1.增加标签创建标签:document.createElement('标签id名') 在某一标签内的最后面插入标签:c.appendChild(b): //即给c加一个孩子b,记住这个孩子是后面进来 ...
js删除指定html及子标签,js中如何删除某个元素下面的所有子元素？（两种方法）...
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结方法一:通过元素的innerHTML属性元素element.innerHTML=""; 方法二:通过元素的remo ...
html新增和删除行,html5页面结构的变化以及增加和删除标签的总结
这篇文章给大家介绍的内容是关于html5页面结构的变化以及增加和删除标签的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 页面结构传统页面结构 html5页面结构 eg 新增标 ...
html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...
一.需求描述在Div标签的右上角显示删除图标二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...
6 JS 和 Jquery 删除标签元素
6 JS 和 Jquery 删除标签元素 Jquery:$().remove() jQuery remove() 方法删除被选元素及其子元素, 即删除元素自身. <body> <di ...
html 右上角删除图标,html+css制作div标签增加右上角删除图标的示例代码_CSS
一.需求描述在Div标签的右上角显示删除图标二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...
js动态为html标签增加class属性及样式
有时候在项目中,我们需要动态的改变相关标签的样式,这样我们可以事先在css中定义好class属性的样式.然后在js中使用addClass,为需要的标签增加定义好的样式的class属性和值,例如:$(& ...
html字符串img添加style,js 匹配 img标签增加 style样式
给img标签增加 style样式: 1.如果img 标签没有style 就先添加style标签 2.添加标签后统一再添加style样式 function imgTagAddStyle (htmlstr ...
js中对a标签增加click事件，事件不生效的解决方案
首先<a>这是a标签</a> 错误的写法:$('a').click(); 正确的写法$('a').html().click(); 或者 a标签里套个 p标签.<a> ...

js增加标签（增加元素）和删除标签（删除元素）

上面是无限增加，下面设置增到最大限制

js增加标签（增加元素）和删除标签（删除元素）相关推荐

最新文章

热门文章