jQuery中remove()和detach()的区别

今天在一个网页中无意间看到了jQuery这样一个方法：detach()方法，由于我比较菜吧对jQuery并没有更加深入的学习了解，所以对这个方法压根就没有使用过。通过在网上查看API发现和remove()方法实现效果是一样的，可是真的一样么，答案是否定的。

先看看官方API对两者的解释：

remove:从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach:从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

根据API可以见到两者的实现效果基本上是一样的，但是我这里主要说的是红色字体标注的部分。相信经常使用jQuery的人已经知道两者的区别了。下面我再多费点文字通过自己测试证明下二者的区别：

在页面中添加两个测试的超链接：
<a href="#" id="remove">remove</a>
<a href="#" id="detach">detach</a>
然后我为两个连接分别添加点击事件，并且存放数据
$("#remove").click(function(){
alert("click remove!");
return false;
});
$("#detach").click(function(){
alert("click detach!");
return false;
});
$("#remove").data({test:"this is remove"});
$("#detach").data({test:"this is detach"});

//测试data绑定数据是否成功
alert($("#remove").data("test"));
alert($("#detach").data("test"));

当在页面中点击测试链接点击都正常运行。然后就通过方法比较remove和detach从DOM中移除后又添加到DOM中的效果：

var remove = $("#remove").remove();
$(document.body).append(remove);
alert($("#remove").data("test"));

var detach = $("#detach").detach();
$(document.body).append(detach);
alert($("#detach").data("test"));

查看输出提示remove()之后绑定的数据和点击事件都被移除了，detach()移除后又添加进去的被保留下来。

注：当然你要是非要使用remove()，还想继续使用最初绑定的事件的话，可以用live()绑定某个事件，不过数据我就不知道怎么保留了~~