Jquery empty() remove() detach() 方法的区别
引言：
最近项目中用到了这几个方法，感觉很大程度上有些相似，查了Jquery的api，同时也找了很多博客文章，发现还是理解不到区别。最后在很多材料和自己的事例验证中，终于找到了区别，不敢独占特拿出来分享。
empty()remove( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.
detach( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.
empty,remove,detach方法的区别
方法名称
元素本身（包含所有属性）
绑定事件和JQuery相关数据
文本域及子节点
empty()
不删除
不删除
删除
remove()
删除
删除
删除
detach()
删除
不删除
删除
示例验证：
验证环境： JQuery-1.8.0.min.js, Firefox 11.0， Firebug1.9.2；
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test Jquery remove detach empty</title><style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style><script src="js/jquery-1.8.0.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).toggleClass("off");});var p;$("#button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { p = $("p").detach(); // p = $("p").remove(); // p = $("p").empty(); } });});</script></head><body> <p id="A">Hello <span>subNode</span></p> how are <p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> </body></html>detach() 方法：执行之前的HTML DOM结构如图：
执行删除之后的 HTML DOM结构如图：
观察可知使用detach方法，删掉了元素<p>本身即它的所有属性（id 等）， 文本域及其子节点<span>subNode</span>.
其他方法，类似可以验证，这里就不赘述。
这里需要说明的是： 绑定事件，指的是JQuery动态绑定的事件，不是通过元素的属性指定的事件。（下面会举例说明）
JQuery 相关数据，不太懂指的什么，没有找到相关示例，希望有识之士不吝赐教。
下面的示例仅针对绑定事件，便于大家理解：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test Jquery remove detach empty</title><style>p { background:yellow; margin:6px 0;} p.off { background: black; }</style><script src="js/jquery-1.8.0.min.js"></script><script>$(document).ready(function(){// JQuery 为P标签动态绑定click事件$("p").click(function(){$(this).toggleClass("off");});var p;$("#button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { p = $("p").detach(); // p = $("p").remove(); // p = $("p").empty(); } });});</script></head><body> <p id="A">Hello <span>subNode</span></p> how are <p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> </body></html>运行该页面，点击按钮，删除； 再次点击按钮，删除的<p>标签，重新加入到body的底部，这里我们重点验证的是，重新加入后的绑定事件click是否有效【这里的click事件为，点击P标签，class在黄色和黑色之间切换】。1) 验证detach方法
可以看到执行detach方法，重新添加之后，JQuery动态绑定的click事件，toggleClass生效，说明之前删除的时候没有把动态绑定的事件删除。
修改程序中以下部分：
// p = $("p").detach();p = $("p").remove();测试remove函数，同样是先删除在加入，执行完后的效果：
可以发现调用remove方法之后，再重新把删除的标签加入到body后时，发现JQuery动态绑定的事件，已经失效，点击P标签，class不能切换。说明在执行remove的时候，已经把JQuery动态绑定的事件删除了。
要验证empty方法，要麻烦一点，在删除之后，重新加入之后，text为空，不能够点击测试click事件，因此我们需要新增一个按钮，为这种情况增加text，便于测试click事件。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test Jquery remove detach empty</title><style>p { background:yellow; margin:6px 0;} p.off { background: black; }</style><script src="js/jquery-1.8.0.min.js"></script><script>$(document).ready(function(){// JQuery 为P标签动态绑定click事件$("p").click(function(){$(this).toggleClass("off");});var p;$("#button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { // p = $("p").detach(); // p = $("p").remove(); p = $("p").empty(); } });// 为删除之后重新加入的p标签加入text$("#buttonA").click(function(){$("#A").text("Hello");$("#B").text("you?");});});</script></head><body> <p id="A">Hello <span>subNode</span></p> how are <p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> <br/> <input type="button" id="buttonA" value="addTextA" /> <br/></body></html>执行效果如图：
可以发现empty方法，没有删除动态绑定事件。
为了更好的理解这里所说的绑定事件是JQuery的动态绑定事件，我们修改一下程序，使用onclick属性，把click事件作为一个属性值，来静态绑定。
修改后的程序如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test Jquery remove detach empty</title><style>p { background:yellow; margin:6px 0;} p.off { background: black; }</style><script src="js/jquery-1.8.0.min.js"></script><script>// 处理P标签click事件function clickHandler(element){$(element).toggleClass("off");}$(document).ready(function(){var p;$("#button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { // p = $("p").detach(); p = $("p").remove(); // p = $("p").empty(); } });});</script></head><body> <p id="A" onclick="clickHandler(this)">Hello <span>subNode</span></p> how are <p id="B" onclick="clickHandler(this)">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> <br/></body></html>我们再次使用remove方法，删除然后在append，发现事件响应有效了。其实这里的click事件已经作为一个静态的p元素的一个属性onclick的值了。所有append之后是有效的。
综上所述，可以得到这个三个方法的上述比较表格了。
参考资料：
1、 JQuery API: http://api.jquery.com/
2、 jQuery方法区别(七)detach() remove()区别 http://www.360doc.com/content/12/0828/17/3400436_232842346.shtml