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>