remove() & detach() 使用及区别

HTML5学堂：文章写于2015年04月14日，本来没什么事可以早点下班的，谁知道测试测出了问题，还是比较诡异的问题——页面中同类型的弹框出现第二次的时候所有的点击失效，而且不只是特殊功能的按钮，连关闭弹框的按钮也失效了。

本文源自热爱HTML5的“艾某人”的网易博客。

项目要求最近开始用Backbone，项目中的每一类弹框对应一个视图，在生成视图的过程中，事件已经绑定在弹框上的所有按钮上，只要在需要的时候插入DOM节点即可。经过多方排查，最终发现是remove()函数使用的问题。

remove方法的定义与用法

remove方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

除了这个元素本身得以保留之外，remove()方法不会保留元素的jQuery数据，其他的比如绑定的事件、附加的数据等都会被移除，这一点和detach()方法不同。

detach方法的定义与用法

detach方法移除被选元素，包括所有文本和子节点。

方法会保留jQuery对象中的匹配元素，因而可以在将来再使用这些匹配的元素。

detach方法会保留所有绑定的事件、附加的数据，这一点与remove不同。

欢迎沟通交流~HTML5学堂

Demo验证remove与detach方法

remove()的例子

1. $remove.click(function(){
2.     $(this).remove();
3.     alert('remove!!!'); // HTML5学堂 H5course
4. })
5. $back.click(function(){
6.     $wrap.append($remove);
7. })

界面如下：back的功能是将原来的元素重新插入到$wrap中。

1、先点击“remove”的按钮，这个元素在DOM里面被移除掉，弹出提示。关闭提示就可以很明显的看到元素已经被移除了。

2、点击“back”，通过class关联的元素重新插入到$wrap的元素中。这时候再次点击“remove”可以发现已经没办法点击了。

detach()的例子

1. $detach.click(function(){
2.     $(this).detach();
3.     alert('detach!!!'); // HTML5学堂 H5course
4. })
5. $back.click(function(){
6.     $wrap.append($detach);
7. })

界面如下：

1、先点击“detach”的按钮，同remove这个元素在DOM里面被移除掉。

2、点击“back”，detach元素回来了。这时候再次点击“detach”，原来绑定的事件仍然存在！

注：代码中直接用click绑定事件，通过on或其他方法绑定也是有效果的。

欢迎沟通交流~HTML5学堂