jQuery基础：remove（）与 detach（）区别

Posted 花雨伞

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础：remove（）与 detach（）区别相关的知识，希望对你有一定的参考价值。

1、detach（）

  • detach() 方法移除被选元素，包括所有文本和子节点。
  • 这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
  • detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            margin: 6px;
            background: yellow;
        }
        p.off{
            background: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    how are
    <p>you?</p>
    <button>按钮</button>
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).toggleClass("off");
        })

        var p;
        $("button").click(function(){
            if(p){
                p.appendTo("body");
                p = null;
            }else{
                p = $("p").detach();
                console.log(p);
            }
        })
    });
</script>
</html>

2、remove（）

  • 将匹配元素集合从DOM中删除。
  • 同时移除元素上的事件及 jQuery 数据。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            margin: 6px;
            background: yellow;
        }
        p.off{
            background: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    how are
    <p>you?</p>
    <button>按钮</button>
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).toggleClass("off");
        })

        var p;
        $("button").click(function(){
            if(p){
                p.appendTo("body");
                p = null;
            }else{
                p = $("p").remove();
                console.log(p);
            }
        });

        //移除 =》加上，点击没反应，绑定的事件失效
    });
</script>
</html>

3、empty（）：移除匹配元素的所有子节点

4、unwrap（）:将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

以上是关于jQuery基础：remove（）与 detach（）区别的主要内容，如果未能解决你的问题，请参考以下文章

jquery 中remove()与detach()的区别

jquery之remove(),detach()方法详解

detach与remove区别，以及detach保留被删除的元素数据，使用

jQuery中的remove()detach()和empty()的区别

jQuery中删除节点方法remove()detach()empty()分析

转载JQuery 中empty, remove 和 detach的区别