detach（），hide（）和remove（） – jQuery之间的区别
这三个jQuery方法的function区别是什么：
- 分离（）
- 隐藏（）
- 去掉（）
hide()将匹配元素的CSS display属性设置为none 。
remove()从DOM中完全删除匹配的元素。
detach()就像remove() ，但是保存了与匹配元素相关联的存储数据和事件。
要重新插入DOM中的分离元素，只需插入从detach()返回的jQuery集：
var span = $('span').detach(); ... span.appendTo('body');
想象一张桌子上的一张纸，上面写着用铅笔写的一些笔记。
-
hide– >扔上衣服 -
empty– >用橡皮擦去除笔记 -
detach– >将纸张拿到手中，随时随地保存 -
remove– >抓住纸张，扔到垃圾箱
该文件表示元素，而注释表示元素的内容（子节点）。
有点简化，不完全准确，但容易理解。
hide()将匹配元素的显示设置为none。
detach()移除匹配的元素，包括所有文本和子节点。
这个方法存储所有与元素相关的数据，因此可以用来恢复元素的数据以及事件处理程序。
remove()还会删除匹配的元素，包括所有文本和子节点。
但是，在这种情况下，只有元素的数据可以被恢复，而不是它的事件处理程序不能。
在jQuery中，有三种从DOM中移除元素的方法。 这三个方法是.empty()和.detach() 。 所有这些方法都用于从DOM中删除元素，但它们都是不同的。
。隐藏（）
隐藏匹配的元素。 没有参数，.hide（）方法是隐藏HTML元素的最简单的方法：
$(".box").hide();
.empty（）
.empty（）方法从选定的元素中删除所有的子节点和内容。 此方法不会删除元素本身或其属性。
注意
.empty（）方法不接受任何参数以避免内存泄漏。 在删除元素本身之前，jQuery从子元素中删除其他构造，如数据和事件处理程序。
例
<div class="content"> <div class="hai">Hai</div> <div class="goodevening">good evening</div> </div> <script> $("div.hai").empty(); </script>
这将导致删除Hai文本的DOM结构：
<div class="content"> <div class="hai"></div> <div class="goodevening">good evening</div> </div>
如果我们在<div class="hai">内有任意数量的嵌套元素，它们也会被删除。
。去掉（）
.remove（）方法删除选定的元素，包括所有文本和子节点。 此方法还会删除所选元素的数据和事件。
注意
当你想删除元素本身，以及它里面的一切时，使用.remove（）。 除此之外，与元素相关的所有绑定事件和jQuery数据都被删除。
例
考虑下面的html：
<div class="content"> <div class="hai">Hai</div> <div class="goodevening">good evening</div> </div> <script> $("div.hai").remove(); </script>
这将导致DOM元素被删除：
<div class="content"> <div class="goodevening">good evening</div> </div
如果我们在<div class="hai">内有任意数量的嵌套元素，它们也会被删除。 其他jQuery构造，如数据或事件处理程序，也会被删除。
。分离（）
.detach（）方法删除选定的元素，包括所有文本和子节点。 但是，它保留数据和事件。 这个方法还会保留已删除元素的副本，以便以后重新插入。
注意
.detach（）方法在稍后将被移除的元素重新插入到DOM时非常有用。
例
<!doctype html> <html> <head> <script src="jquery-1.10.2.js"></script> </head> <body> <p>Hai!</p>Good <p>Afternoo</p> <button>Attach/detach paragraphs</button> <script> $( "p" ).click(function() { $( this ).toggleClass( "off" ); }); var p; $( "button" ).click(function() { if ( p ) { p.appendTo( "body" ); p = null; } else { p = $( "p" ).detach(); } }); </script> </body> </html>
欲了解更多信息，请访问： http : //www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(){ var $span; $span = $("<span>"); $span.text("Ngoc Xuan"); function addEvent() { $span.on("click",function(){ alert("I'm Span"); }); } function addSpan() { $span.appendTo("body"); } function addButton(name) { var $btn = $("<input>"); $btn.attr({value:name, type:'submit'}); if(name=="remove"){ $btn.on("click",function(){ $("body").find("span").remove(); }) }else if(name=="detach"){ $btn.on("click",function(){ $("body").find("span").detach(); }) }else if(name=="Add") { $btn.on("click",function(){ addSpan(); }) }else if(name=="Event"){ $btn.on("click",function(){ addEvent(); }) }else if (name == "Hide") { $btn.on("click",function(){ if($span.text()!= '') $span.hide(); }) }else { $btn.on("click",function(){ $span.show(); }) } $btn.appendTo("body"); } (function () { addButton("remove"); addButton("detach"); addButton("Add"); addButton("Event"); addButton("Hide"); addButton("Show"); })(); }); </script> </body> </html>
