JavaScript使用ul中的li实现删除效果

最新推荐文章于 2023-10-13 10:05:50 发布

西红柿炒番茄AB

最新推荐文章于 2023-10-13 10:05:50 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/a_sid/article/details/53452918

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
            }

            li {
                background-color: #ddd;
                margin-top: 2px;
            }

            li:hover {
                background-color: #be3131;
            }

            li.hover {
                background-color: green;
            }

            ;
        </style>
    </head>

    <body>
        <ul id="uid">
            <li>篮球</li>
            <li>足球</li>
            <li>羽毛球</li>
            <li>篮球</li>
            <li>足球</li>
            <li>羽毛球</li>
            <li>篮球</li>
            <li>足球</li>
            <li>羽毛球</li>
        </ul>
        <button onclick="doDel()">删除</button>
        <script type="text/javascript">
            //获取所有的li节点
            var list = document.getElementById("uid").getElementsByTagName("li");
            //给每一个li节点添加class属性
            for(var i = 0; i < list.length; i++) {
                list[i].onclick = function() {
                    if(this.className == "hover") {
                        this.className = "";
                    } else {
                        this.className = "hover";
                    }

                }

            }

            //删除操作
            function doDel() {
                for(var i = 0; i < list.length; i++) {
                    if(list[i].className == "hover") {
                        list[i].parentNode.removeChild(list[i]);
                        i--;
                    }
                }
            }
        </script>
    </body>

</html>

这里写图片描述

西红柿炒番茄AB

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript使用ul中的li实现删除效果

<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul { list-style: none; } li {
复制链接

扫一扫