jQuery中的detach()方法解析

最新推荐文章于 2025-06-23 11:26:36 发布

最新推荐文章于 2025-06-23 11:26:36 发布 · 1.9k 阅读

文章标签：

#detach #javascript #jQuery

本文通过一个简单示例解释了jQuery中detach()方法的特点及用途，对比remove()方法，演示了如何保留已删除元素的数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery中，存在着三个删除元素的方法

1.empty()

2.remove([selector])

3.detach([selector])

对于前两种方法可能大家已经很熟悉了，但是关于detach()的使用可能稍微有一些欠缺，其实detach()和remove()是非常相似的，这两者的区别主要在于是否将已删除元素所绑定的数据删除。这是什么意思呢?让我们写个简单的demo来说明这个问题

<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script type="text/javascript" src="jquery-1.11.0.min.js" ></script>  
        <script type="text/javascript">  
            $(function() {    
                // $div2.data("value", 1);  
                $("#detach").on("click", function() {  
                    $div2.detach();  
                });  
  				var $div2=$("#div2");
                $("#back").on("click", function() {  
                    $("#div3").after($div2);  
                    console.log($("#div2").attr('data'));  
                });  
            });  
        </script>  
    </head>  
    <body>  
        
        <div id="div2" data='kka'>div2</div>  
        <div id="div3">div3</div>  
        <input value="detach" id="detach" type="button" />  
        <input value="back" id="back" type="button" />  
    </body>  
</html>

对于上面的demo，运行之后当我们点击detach按钮的时候，js就执行了detach方法将div2删除，此时我们注意到div2中是绑定数据的，当我们再点击back按钮的时候，将div2重新添加到div3的后面，然后我们在控制台输出div2中绑定的数据，仍然是可以输出kka的。

所以，我们一开始所说的detach()不删除元素绑定的数据就是这个意思。在日常的开发中我们可以依据具体情况使用对应的方法来处理dom元素。