jquery中remove与detach的区别

最新推荐文章于 2022-01-19 09:37:31 发布

程序员-小许

最新推荐文章于 2022-01-19 09:37:31 发布

阅读量328

点赞数 2

本文链接：https://blog.csdn.net/m0_37820751/article/details/102498645

版权

两者的定义

detach

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

remove

remove() 方法移除被选元素，包括所有的文本和子节点。

该方法也会移除被选元素的数据和事件。

举个例子

我们把执行remove和detach返回的被删除的元素重新append上去，会发现remove返回的被删除的元素没有了原来的点击事件，而detach还保存着原来的点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p {
            background:yellow;
            margin:6px 0;
        }
        p.off {
            background: black;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>我可以点击</p>
<p>点击后改变背景色</p>
<button id="remove">remove删除/再次点击添加被删除的元素</button>
<button id="detach">detach删除/再次点击添加被删除的元素</button>

<script>
    //用p保存执行remove和detach返回的被删除的元素
    let p;
    //p的点击事件
    $("p").click(function(){
        $(this).toggleClass("off");
    });
    //点击remove按钮使用remove删除p标签,再次点击重新在body上添加被删除的元素
    $("#remove").click(function () {
        if(p){
            $('body').append(p);
            p=null;
        }else {
            p= $("p").remove();
        }
    })
    //点击detach按钮使用detach删除p标签,再次点击重新在body上添加被删除的元素
    $("#detach").click(function(){
        if ( p ) {
            $('body').append(p);
            p = null;
        } else {
            p = $("p").detach();
        }
    });
</script>
</body>
</html>

程序员-小许

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery中remove与detach的区别

两者的定义detachdetach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。removeremove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。举个例子...
复制链接

扫一扫