jQuery中remove方法和detach方法的区别

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

我是你要找的bug

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

阅读量410

点赞数

分类专栏： jquery remove方法 detach方法文章标签： jquery

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/104676637

版权

jquery 同时被 3 个专栏收录

10 篇文章

订阅专栏

remove方法

1 篇文章

订阅专栏

detach方法

1 篇文章

订阅专栏

remove() 和 detach()都是删除元素的方法那他们的区别是？？

remove方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
    <script src="./jquery/jquery.js"></script>
    <script>
        $(function (){
            $("button").click(function(){
                //remove的返回值就是删除的这个节点
                //$("#div1").remove();
                var node=$("#div1").remove();//把div1删除
                node.appendTo($("#div2"));//把删除的div1添加到div2里
            })
        })

    </script>
</head>
<body>
<button>删除节点</button>
<div id="div1" title="hello" class="box"></div>
<div id="div2"></div>
</body>
</html>

在这里插入图片描述

在删除div1之前给div1添加一个鼠标移入移出事件：

<script>
    $(function (){
        $("#div1").hover(function(){
            $(this).css("backgroundColor","orange");
        },function(){
            $(this).css("background","blue");
    });
        $("button").click(function(){
            //remove的返回值就是删除的这个节点
            //$("#div1").remove();
            var node=$("#div1").remove();//把div1删除
            node.appendTo($("#div2"));//把删除的div1添加到div2里
        })
    })

</script>

当没删除div1 之前移入移出的事件都可以执行但当删除div1 之后再移入移出这些事件都不在了
所以 remove() 并不会保留这个元素节点上之前的事件和行为

datach方法

<script>
    $(function (){
        $("#div1").hover(function(){
            $(this).css("backgroundColor","orange");
        },function(){
            $(this).css("background","blue");
    });
        $("button").click(function(){
            //$("#div1").detach();
            var node=$("#div1").detach();//把div1删除
            node.appendTo($("#div2"));//把删除的div1添加到div2里
        })
    })

</script>