Answers:
hide()将匹配元素的CSS display属性设置为none。
remove() 完全从DOM中删除匹配的元素。
detach()类似于remove()，但是保留与匹配元素关联的存储的数据和事件。
要将分离的元素重新插入DOM中，只需jQuery从中插入返回的集合detach()：
var span = $('span').detach();
...
span.appendTo('body');
remove代替detach，则该示例仍然有效。
remove()，然后再次附加它，绑定将消失，单击范围将无济于事。如果您调用detach()并重新连接，绑定将保持不变，并且单击处理程序将继续工作。
想象一张纸在桌子上，上面有一些用铅笔写的笔记。
hide ->穿上衣服empty ->用橡皮擦去除笔记detach ->抓住手中的纸张，将其保存在那里，以备将来使用remove ->抓住纸并将其扔到垃圾箱纸张代表元素，注释代表元素的内容（子节点）。
有点简化，并不完全准确，但易于理解。
在jQuery中，有三种方法可从DOM中删除元素。这三种方法是.empty()，.remove()和.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>
这将导致<div>删除元素的DOM结构：
<div class="content">
<div class="goodevening">good evening</div>
</div
如果我们内部有许多嵌套元素<div class="hai">，它们也会被删除。其他jQuery构造（例如数据或事件处理程序）也将被删除。
。分离（）
.detach（）方法删除选定的元素，包括所有文本节点和子节点。但是，它保留数据和事件。此方法还保留已删除元素的副本，这允许在以后的时间重新插入它们。
注意
当稍后将删除的元素重新插入DOM时，.detach（）方法很有用。
例
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/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>
detach，看看stackoverflow.com/questions/12058896/...