节点操作删除节点

最新推荐文章于 2024-01-02 20:48:13 发布

hcoke

最新推荐文章于 2024-01-02 20:48:13 发布

阅读量1.4k

点赞数 1

分类专栏：学习笔记文章标签： javascript html

本文链接：https://blog.csdn.net/m0_62962469/article/details/123491547

版权

学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

删除节点 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>

hcoke

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
节点操作删除节点

删除节点 node.removeChild(child) 从DOM中删除一个子节点返回删除的子节点 node是父节点 child是子节点<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">删除</button&g
复制链接

扫一扫