jQuery学习笔记之empty()

最新推荐文章于 2024-07-04 23:19:06 发布

不务正业的野猴子

最新推荐文章于 2024-07-04 23:19:06 发布

阅读量526

点赞数

分类专栏： jQuery学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/quan20111992/article/details/78462259

版权

jQuery学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

官方资料
jQuery.empty()

jQuery.detach()

empty()
删除匹配元素(集)的全部子元素，该方法不接受任何参数。empty()不仅移除子元素、后代元素，也移除匹配元素内部的文本内容。
empty()在移除子元素之前会先移除子元素上的数据和事件处理。如果你想移除元素而又不想破坏它的数据结构或事件处理(以便这些元素稍后可以再次添加)，我们可以使用detach()代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.2.4.js"></script>
</head>
<body>

    <ul>
        <li>方案 1<span>测试效果</span></li>
        <li>方案 2<span>测试效果</span></li>
        <li>方案 3<span>测试效果</span></li>
        <li>方案 4<span>测试效果</span></li>
        <li>方案 5<span>测试效果</span></li>
    </ul>

    <button id="span">删除span</button>
    <button id="li">删除li</button>
    <button id="detach">使用detach</button>
    <button id="add">添加被detach删除的数据</button>
</body>
<script type="text/javascript">
    $(function(){
        $("#span").on("click",function(){
            $("ul li span").empty();
        });

        $("#li").on("click",function(){
            $("ul").empty();
        });

        $("ul").on("click","li",function(){
            alert($(this).text());
        })
        var data = null;
        $("#detach").on("click",function(){
            data = $("ul").detach();
        });
        $("#add").on("click",function(){
            $("body").prepend(data);
            data = null;
        });
    })
</script>
</html>

在使用上面的demo查看效果时请打开开发者工具，注意观察代码的变化

不务正业的野猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记之empty()

官方资料 jQuery.empty()jQuery.detach()empty() 删除匹配元素(集)的全部子元素，该方法不接受任何参数。empty()不仅移除子元素、后代元素，也移除匹配元素内部的文本内容。 empty()在移除子元素之前会先移除子元素上的数据和事件处理。如果你想移除元素而又不想破坏它的数据结构或事件处理(以便这些元素稍后可以再次添加)，我们可以使用detach()代替<!D
复制链接

扫一扫

专栏目录