jQuery中的detach()方法解析

小鱼儿 2022-06-13 01:25 186阅读 0赞

在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元素。