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

最新推荐文章于 2024-06-14 17:38:31 发布
最新推荐文章于 2024-06-14 17:38:31 发布
阅读量1.3w 收藏 7
点赞数 1
分类专栏： 前端 js 文章标签： js html js增加标签 js减少标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44944193/article/details/105425589
版权
前端 同时被 2 个专栏收录
37 篇文章 1 订阅
订阅专栏
js
26 篇文章 0 订阅
订阅专栏

效果图：（我用的是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'); //找到最大的div
	var 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); //点击减号输入框数值减1
            if (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'); //找到最大的div
    function 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中最后的一个div
        maximum.removeChild(last); //删除节点
    }
</script>

 

会篮球的程序猿
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现从矩形框添加、移除标签
York_Ice的博客
11-27 1085
预期效果 HTML代码 &lt;body&gt; &lt;section&gt; &lt;p&gt;单击下面的“添加”按钮，添加标签&lt;/p&gt; &lt;div id="blank"&gt; &lt;/div&gt; &lt;div class="clearButton" oncl
前端学习笔记：js 第五天 -- 增加标签和删除标签、表格、全选、全不选、反选
weixin_44519518的博客
07-28 310
增加标签和删除标签 控制表单元素的值 获取值获取标签.value 修改值获取标签.value='值' 创建标签：document.createElement 设置标签内容： 获取标签.innerHTML=``; 增加标签：a.appendChild(b) 把b追加到a内部的后面 删除标签：b.parentNode.removeChild(b) 删除b标签a是b的父级 修改文本标签的值： 获取标签.value='值'; <script> ...
JavaScript 添加一个元素标签
weixin_44493841的博客
04-07 3133
JavaScript 添加一个元素标签 文章目录JavaScript 添加一个元素标签代码效果 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p&gt
在 JavaScript 中，如何给js对象增加新的属性和值
最新发布
weixin_59191887的博客
06-14 483
点符号用来添加对象的属性，只能用于已知的、固定的属性名。也就是说，属性名必须是一个有效的标识符（不是变量），在编写代码时就已经确定。方括号符号则允许使用动态的属性名，即可以使用变量作为属性名。这意味着可以在运行时根据变量的值来添加或访问对象的属性。
js 创建标签 追加标签
热门推荐
weixin_42599236的博客
01-23 1万+
适用于写评论，写博客等要创建和插入新的标签的地方 四个步骤： 1、创建标签 var tag=document.createElement( ' li ' ); 2、添加标签内容 tag.innerHTML='内容'  内容可以是标签加常量加变量：例如：list.innerHTML=' &lt;li&gt;'+name+‘你好！&lt;/lli&gt;  ' 其中，name是获取到的名字的...
js中类的添加和删除
qq_44604924的博客
08-22 528
js实现类的添加删除以及如果有就删除，如果没有就添加的功能 类的添加： function addClass(obj,name){ if(!hasClass(obj,name)){ obj.className += " "+name; } } 检测是否拥有该类： function hasClass(obj,name){ var reg = new RegExp("\\b"+name+"\\b");//正则表达式，查看当前元素是否有该类了，\b代表单词的开头和结尾
JS实现动态增加和删除li标签行的实例代码
10-21
本文将通过一个具体的实例，讲解如何使用JavaScript实现动态增加和删除`li`标签行。 首先，我们来看一下如何添加`li`标签。在这个示例中，`addDepartment`函数用于动态创建一个新的`li`元素。以下是如何实现这一...
javascript删除一个html元素节点的方法
10-25
这个函数首先通过`getElementById`获取到`content`元素和按钮元素，然后为按钮设置点击事件处理函数。在处理函数中，调用`odiv.parentNode.removeChild(odiv)`，删除了`content`元素。 `removeChild()`方法是DOM ...
jquery动态添加带有样式的HTML标签元素方法
10-18
在本文中，我们将深入探讨如何使用jQuery来动态添加和移除带有样式的HTML标签元素，这对于构建交互式网页和处理用户界面动态变化至关重要。在给定的示例中，我们看到一个功能，允许用户添加和删除文件上传表单，同时...
javascript中获取元素标签中间的内容的实现方法
11-21
本文主要探讨两种方法来实现这一目标，尤其是在元素标签内部获取和设置内容。 1. 使用`innerHTML`属性： `innerHTML`是一个非常实用的属性，它允许我们获取或设置HTML元素内部的所有HTML内容。当我们想要替换一个...
jQuery添加和删除指定标签的方法
11-23
在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了丰富的 API 来简化 DOM 操作，包括添加和删除元素的 CSS 样式。本文将详细介绍如何使用 jQuery 的 `addClass()`、`removeClass()` 和 `toggleClass()...
js实现鼠标放入后面内容标签显示，鼠标移出内容标签隐藏
karlif的博客
01-22 2097
昨天犯了个毛病，input显示框显示不全的问题，要求是把鼠标悬停输入框，显示完整的内容（输入框的宽度不能够修改）！ 正常人都会想到用tinput的itle属性，俺当时就脑抽了吧，想着在后面添加一个span框（span），效果就是鼠标放入输入框，input的父级元素加上一个span框，并且取出input 的值，鼠标移出，就把span元素移除（脑子抽了，非常规操作当时想的理所当然）。 话不多说，看看这个好就不曾写的原生js代码。。。。。 html的代码如下 <td style='width:80px;'
js删除标签和增加标签
xclsky的博客
12-27 8167
try { mapObj.openOverlayTip(pointid);// }catch (e) { var obj=document.getElementById("map"); var obj1=obj.parentNode; obj1.removeChild(obj); var new_div=document.createElement("div"); new_d
layui.laytpl中js方法书写及调用:去除html标签
weixin_30703911的博客
12-08 1296
1 <script type="text/html" id="conTpl"> 2 3 {{# 4 var delhtml = function(str) { 5 return str.replace(/&lt;[^>].*?&gt;/g, ''); 6 } 7 ...
【超简单】基于 Layui + JQuery 的多项展示（可删除）
极光之域的博客
01-30 457
【超简单】基于 Layui 的多项展示（可删除） 效果预览： 1. 导入 Layui 的依赖文件 <link rel="stylesheet" href="./js/layui/css/layui.css"> <script type="text/javascript" src="./js/layui/layui.all.js"></script> 2. 在页面中创建展示用的容器 <div class="layui-input" id="multi-deleta
js中增加标签删除标签和input修改获取内容
小彩虹的博客
01-23 2544
1、增加标签 创建标签：document.createElement('标签id名') 在某一标签内的最后面插入标签：c.appendChild（b)； //即给c加一个孩子b，记住这个孩子是后面进来的，所以在该标签内的最末位置 增加同级标签：c.parentsNode.insertBefore（b，c）； //即在c的父级里面插入一个标签b，而且还是在c前面的； 实例代码： &l...
js动态添加和删除标签
weixin_30892763的博客
07-27 1027
html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead><tr><th>姓名</th><th>年薪</th><th>操作</th></tr&gt...
使用原生js中的add和remove进行class类的增加和删除
qq_42345237的博客
01-06 1096
我们可以直接使用原生JavaScript提供的API来做class类的增加和删除，效率更高。 Element.classList 它是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。 如果类属性未设置或为空，那么它的length为0。虽然element.classList本身是只读的，但是你可以使用add()和remove()方法来修改它。 add( String[, Str...
jQuery 删除元素的子标签
05-23
可以使用 jQuery 的 `empty()` 方法来删除元素的所有子标签，例如： ```javascript $('#myElement').empty(); ``` 这将删除 `#myElement` 元素中的所有子标签。如果您只想删除特定类型的子标签，可以使用 `remove()` 方法，例如： ```javascript $('#myElement').find('span').remove(); ``` 这将删除 `#myElement` 元素中所有的 `<span>` 标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值