empty，remove，detach 三个删除区别

休息休息夏

于 2021-05-09 12:59:38 发布

阅读量431

点赞数 2

分类专栏： js高级知识点及案例文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/qq_42881159/article/details/116563412

版权

js高级知识点及案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标题：empty，remove，detach 三个删除区别

代码演示：

<style>
    div{
        height: 200px;
        width: 200px;
        background-color: orange;
    }
</style>
<body>
    <button type="button" id="empty">empty删除</button>
    <button type="button" id="remove">remove删除</button>
    <button type="button" id="detach">detach删除</button>
<div id="d1">
    <ul>
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
</div>
</body>

样式为：
代码演示

empty，remove，detach 三个删除区别：

.empty用来清空元素内部内容，remove和detach用来删除元素本身
.remove删除的元素是彻底删除，包括元素携带的时间一起消失，再次追加回该元素，事件无法带回
.detach删除的元素彻底删除，但是元素携带的事件不会消失，再次追加回该元素，事件一起带回

1.empty删除方式

$("#d1").click(function () {
    alert("我会回来的");
});
$("#empty").click(function () {
    //清空d1元素内所有的元素
    //返回值是被操作的标签的jq对象，
    let d1_empty = $("#d1").empty();
    console.log(d1_empty);
});

点击“empty删除”按钮：效果为
在这里插入图片描述

2.remove删除方式

$("#remove").click(function () {
    //删除元素本身
    //返回值是被操作的标签的jq对象
    //并且该对象携带的事件绑定被一起删除
    let d1_remoe = $("#d1").remove();
    console.log(d1_remoe);
    setInterval(function () {
        $("body").append(d1_remoe);
    },2000);
});

1.点击删除按钮，样式消失
在这里插入图片描述
2.同时让设置定时器，让他们两秒之后恢复：两秒后恢复，点击”#d1“事件，查看：alter弹窗并没有弹出来

3.detach删除方式

$("#detach").click(function () {
    //删除元素本身
    //返回值是被操作的标签的jq对象
    //并且该对象携带的事件绑定会留下
    let d1_detach = $("#d1").detach();
    console.log(d1_detach);
    setInterval(function () {
        $("body").append(d1_detach);
    },2000);
});

1.点击detach删除按钮：
在这里插入图片描述
2.两秒之后，样式恢复，同时点击选项，发现alter弹窗恢复

休息休息夏

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
empty，remove，detach 三个删除区别

标题：empty，remove，detach 三个删除区别代码演示：<style> div{ height: 200px; width: 200px; background-color: orange; }</style><body> <button type="button" id="empty">empty删除</button> <button typ
复制链接

扫一扫

专栏目录