jQuery实现li节点的删除

最新推荐文章于 2022-03-21 19:48:19 发布

西红柿炒番茄AB

最新推荐文章于 2022-03-21 19:48:19 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/a_sid/article/details/53482754

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细介绍了如何利用jQuery选择器和方法高效地从DOM中删除li节点，包括选择li元素，确认删除操作以及确保页面更新后的正确性。

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

<html>

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

            li {
                line-height: 25px;
                margin-top: 3px;
            }

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

            li.hover {
                background-color: #fc0;
            }
        </style>
        <script src="./jquery-2.2.4.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //获取每一个li节点并设置点击事件
                $("li").click(function() {
                    //当点击某一个节点的时候，增加类名为hover
                    $(this).toggleClass("hover");
                });

                //获取删除按钮并设置点击事件
                $("button").click(function() {
                    //将类名是hover的节点删除
                    $("li.hover").remove();
                });
            });
        </script>
    </head>

    <body>
        <h2 id="hid">jQuery实例--节点删除</h2>
        <ul>
            <li>asdfasdfasfd</li>
            <li>asdfasdfasfd</li>
            <li>asdfasdfasfd</li>
            <li>asdfasdfasfd</li>
            <li>asdfasdfasfd</li>
            <li>asdfasdfasfd</li>
        </ul>
        <button>删除</button>
    </body>

</html>

这里写图片描述