删除节点

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0
<!DOCTYPE html>
<html lang="en">
  <head></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) {
          this.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      };
    </script>
  </body>
</html>