JavaScript文档对象模型DOM节点操作之删除节点(6)

在这里插入图片描述
removeChild方法只能删除当前节点的子节点

效果展示:
在这里插入图片描述

示例展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>删除</button>
		<ul>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
		</ul>
		<script>
			//当点击删除按钮就删除ul里面的li元素,直到全部删完,删除按钮禁用
			var btn = document.querySelector('button');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
      
      
				if (ul.children.length == 0) {
      
      
					this.style.disabled = true; //disabled属性为true时代表按钮被禁用 flase的话代表按钮未被禁用
				}else {
      
      
					ul.removeChild(ul.children[0]);
				}			
			}
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_45308912/article/details/121367735