回答:
hide()一致した要素のCSS displayプロパティをに設定しnoneます。
remove() 一致した要素をDOMから完全に削除します。
detach()はに似てremove()いますが、一致した要素に関連付けられた保存データとイベントを保持します。
切り離された要素をDOMに再挿入するには、単に返さjQueryれたセットをから挿入しdetach()ます。
var span = $('span').detach();
...
span.appendTo('body');
remove代わりにを使用してdetachも、例は機能します。
remove()て再度アタッチした場合、バインドは失われ、スパンをクリックしても何も起こりません。呼び出しdetach()て再接続しても、バインディングは維持され、クリックハンドラーは機能し続けます。
jQueryには、DOMから要素を削除するための3つの方法があります。これらの3つの方法があり.empty()、.remove()と.detach()。これらのメソッドはすべて、DOMから要素を削除するために使用されますが、すべて異なります。
。隠す（）
一致した要素を非表示にします。パラメータがない場合、.hide（）メソッドはHTML要素を非表示にする最も簡単な方法です。
$(".box").hide();。空の（）
.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（）
.detach（）メソッドは、すべてのテキストと子ノードを含む、選択された要素を削除します。ただし、データとイベントは保持されます。このメソッドは、削除された要素のコピーも保持するため、後で再挿入できます。
注意
.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、stackoverflow.com