jQuery中detach、remove和empty的区别

一、empty()

　　empty的作用是移除指定元素的子元素或者时指定元素的文本内容，但是会保留元素本身，同时保留元素绑定的事件以及jQuery数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <p>this is p1</p>
    <p>this is p2</p>
    <p>this is p3</p>
</body>
<script>
    $(function () {
        $("p").empty();
    })
</script>
</html>

在页面上虽然看不到p元素，但是通过F12查看可以发现，p元素是存在的，只是p元素中的内容被移除了。

二、detach()

　　detach的作用是移除匹配的元素及其子元素，但是会保留绑定的事件以及jQuery数据。

三、remove()

　　remove与detach一样，也是移除元素及其子元素，但是不同的是，remove会同时移除元素绑定的事件以及jQuery数据。

　　通过文字描述不足以表示detach和remove的区别，接下来我会通过一段代码演示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        .match{
            color:red;
        }
    </style>
</head>
<body>
    <div id="div1">this is div1</div>
    <div id="div2">this is div2</div>
    <input type="button" id="remove" value="remove"/>
    <input type="button" id="return" value="return"/>
</body>
<script>
    $(function () {
        var div1 = $("#div1");

        $("#div1").on("click", function () {
            $(this).toggleClass("match");
        });

        $("#remove").on("click",function(){
            $("#div1").remove();
        });

        $("#return").on("click", function () {
            $("#div2").before(div1);
        });
    })
</script>
</html>

我在第一个div上绑定了一个click事件，当点击div1的时候，文字的颜色会变红，同时有两个button表单，点击remove时，div1会执行remove方法，点击return时，将div1添加回来。这里要注意，需要通过一个变量来存储div1，否则在执行了detach或者是remove方法之后，div1就不存在了，无法通过before来添加。

运行结果：

当点击this is div1的时候，文字会变红，进行remove和return之后，再点击文字不会变红，这是因为remove将原来div上面绑定的事件也一并移除了，如果将代码中的remove改为detach，移除之后再回复，click事件依然会触发。

总结：

1、empty不会移除元素本身，而是移除它的子元素以及文本内容。

2、remove和detach都会移除元素本身，但是remove会移除元素绑定的事件以及jQuery数据，但是detach会保留这些，当我们希望将元素移除之后，在之后的某个时间需要将它回复回来，并且继续执行之前绑定的事件，就需要使用detach。

 

posted on 2017-08-30 10:37  观琪不喻  阅读(389)  评论(0)  编辑  收藏  举报

导航