前端 -- js增加标签删除标签

话不多说上代码:

效果:

代码:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<body>
		<span class="maximum">
			<div>
				身份证号:<input type="text" name="oid" id="" value="" placeholder="身份证" /><br>
				 姓名:<input type="text" name="name" id="" value="" placeholder="名字" /><br>
				 体温正常: 是 <input type="radio" name="temperature" value="0" id="" checked>
				           否 <input type="radio" name="temperature" value="1" id="">
			</div><br />
		</span>
		<input id="add" type="button" value="点击增加最后一个">
		<input id="reduce" type="button" value="点击减少最后一个">
		<script>
			var number = 0;
			var maximum = document.querySelector('.maximum'); //找到最大的div
			var add = document.querySelector('#add'); //找到第三个第一个按钮
			add.onclick = function() {
				var newly = document.createElement('div');
				maximum.appendChild(newly);
				number++;
				newly.innerHTML =
					`<div>身份证号:<input type="text" name="oid${number}" id="" value="" placeholder="身份证" /><br>
					 姓名:<input type="text" name="name${number}" id="" value="名字" /><br>
					 体温正常: 是 <input type="radio" name="temperature${number}" value="0" id="" checked>
			                   否 <input type="radio" name="temperature${number}" value="1" id=""></div><br />`;
			}
			var reduce = document.querySelector('#reduce'); //找到最后一个按钮
			reduce.onclick = function() {
				var last = maximum.lastElementChild;
				maximum.removeChild(last); //删除节点
			}
		</script>
	</body>

</html>
发布了105 篇原创文章 · 获赞 17 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44944193/article/details/105156559