LOSER的学习案例——————————删除节点

乱凌曦彧

于 2022-09-04 14:40:29 发布

阅读量272

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js HTML 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_72174695/article/details/126689301

HTML 同时被 2 个专栏收录

42 篇文章

订阅专栏

18 篇文章

订阅专栏

这篇博客介绍了一个简单的HTML页面，其中包含一个删除按钮和一个列表。当点击删除按钮时，JavaScript代码会逐个移除列表中的条目。当所有列表项都被删除后，删除按钮将被禁用，防止进一步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>删除</button>
    <ul>
        <li>胸大</li>
        <li>胸二</li>
        <li>光头强</li>
        <script>
            //node.removeChild（）放发从DOM中删除一个子节点，返回删除的节点。
            //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>
    </ul>
</body>

</html>