在JavaScript中删除当前节点的方法

2022-12-29 10:43:53
1032次极悦

在JavaScript中删除当前节点的方法是什么？极悦小编来告诉大家。

删除节点 node.removeChild(child) 从DOM中删除一个子节点返回删除的子节点 node是父节点 child是子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">删除</button>
		<ul>
			<li>熊大</li>
			<li>熊二</li>
			<li>光头强</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector('ul');
			var btn = document.querySelector('button');
			btn.onclick = function() {
				if (ul.children.length == 0 ) {
					this.disabled = 'true';
				} else {
					ul.removeChild(ul.children[0]);
				}
			}
		</script>
	</body>
</html>

点击删除删除一个li

删除留言案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}			
			li {
				width: 300px;
				padding: 5px;
				background-color: rgb(245, 209, 243);
				color: red;
				font-size: 14px;
				margin: 15px 0;
				list-style: none;
			} 
			ul {
				margin-top: 50px;
			} 
			li a {
				float: right;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<textarea rows="10" cols="30">请输入内容</textarea>
		<button type="button">发布</button>
		<ul> 
		</ul>
		<script type="text/javascript">
			//1.获取元素
			var btn = document.querySelector('button');
			var text = document.querySelector('textarea');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
				if (text.value == '') {
					alert('您输入内容为空');
					return false;
				} else {
					//（1）创建元素
					var li = document.createElement('li');
					//先有li才能赋值
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";  //使用javascript:;可以不跳转链接
					//（2）添加元素
					//ul.appendChild(li);
					ul.insertBefore(li, ul.children[0])
					//(3)删除元素  删除的是当前li a的父亲
					var as = document.querySelectorAll('a');
					for (var j = 0; j < as.length; j++) {
						as[j].onclick = function() {
							ul.removeChild(this.parentNode);  //删除的li是当前 a所在的li   this.parentNode是子元素li 父元素是ul
						}
					}
				}
			}
		</script>
	</body>
</html>

上一篇：关于ArrayList类的方法介绍下一篇：比较常见的List泛型集合用法