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（）:将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

posted on 2016-10-05 23:58 花雨伞阅读(340) 评论(0) 收藏举报