<!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>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
// <script>通过获取li的集合，然后逐一删除的方法存在错误，因为lis数组是引用类型，lis[0]一直保存的是<li>熊大</li>，第一次能够正常删除数据，第二次由于已经删除了<li>熊大</li>，因此会报错
// var lis=document.querySelectorAll('li');
// var ul=document.querySelector('ul');
// var button=document.querySelector('button');
// button.onclick=function(){
// ul.removeChild(lis[0]);
// }
// </script>
</script>
</body>
</html>