remove而不是detach，示例仍然可以工作。 - comecmeremove()并重新附加，绑定将消失，单击该span将无效。如果您调用detach()并重新连接，则绑定保持不变，点击处理程序仍然有效。 - lambshaanxy想象桌子上有一张纸，上面用铅笔写着一些笔记。
hide -> 在纸上扔一块布遮住它empty -> 用橡皮擦掉纸上的笔记detach -> 抓住纸并保留在手中以备未来使用remove -> 抓住纸并将其扔进垃圾桶桌子代表当前的 DOM 空间，纸代表元素，笔记代表元素的内容（子节点）。
这有点简化不完全准确，但很容易理解。
hide()方法将匹配的元素的显示设置为none。
detach()方法删除匹配的元素，包括所有文本和子节点。
此方法存储与元素相关联的所有数据，因此可以用于恢复元素的数据以及事件处理程序。
remove()方法也会删除匹配的元素，包括所有文本和子节点。
但是，在这种情况下，只能恢复元素的数据，无法恢复其事件处理程序。
.empty()，.remove()和.detach()。所有这些方法都用于从DOM中删除元素，但它们都不同。
.hide()
隐藏匹配的元素。如果没有参数，.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>
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
如果我们在 <div class="hai"> 内嵌套了任意数量的元素，它们也将被一并删除。
.remove()
.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()
.detach()方法会移除所选元素及其所有文本和子节点，但保留数据和事件。该方法还会保留已移除元素的一个副本，使它们可以稍后重新插入到DOM中。
注意
.detach()方法在需要稍后重新插入已删除元素到DOM中时非常有用。
示例
<!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的示例，请查看https://stackoverflow.com/questions/12058896/restore-multiple-detached-elements-in-jquery - LCJ