节点操作之删除节点

蔚落 2023-10-03 15:21 179阅读 0赞

节点操作之删除节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>节点操作之删除节点</title>
  9. </head>
  11. <body>
  12.     <button>删除</button>
  13.     <ul>
  14.         <li>熊大</li>
  15.         <li>熊二</li>
  16.         <li>光头强</li>
  17.     </ul>
  18.     <script>
  21.         // 1.获取元素
  22.         var ul = document.querySelector('ul');
  23.         var btn = document.querySelector('button');
  27.         // 2. 删除元素  node.removeChild(child)
  28.         // ul.removeChild(ul.children[0]);
  32.         // 3. 点击按钮依次删除里面的孩子
  33.         btn.onclick = function () {
  35.             if (ul.children.length == 0) {
  37.                 this.disabled = true;       //disable当为0的时候 删除按钮禁用
  38.             }
  40.             else {
  42.                 ul.removeChild(ul.children[0]);//移除ul里边的第0个孩子
  43.             }
  44.         }
  47.     </script>
  48. </body>
  50. </html>

发表评论

表情：
评论列表 （有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

    相关 DOM删除节点

    一 介绍 删除节点通过使用removeChild()方法来实现。 removeChild()方法用来删除一个子节点。 obj. removeChild(oldChild)

    Bertha 。Bertha 。/ 0 赞/ 446 阅读