【发布时间】：2021-01-02 01:03:32
【问题描述】：
这三个jQuery方法的功能区别是什么：
- 分离（）
- 隐藏()
- 删除()
【问题讨论】：
-
detach的例子，看看stackoverflow.com/questions/12058896/…
标签： javascript jquery
【发布时间】：2021-01-02 01:03:32
【问题描述】：
【讨论】：
-
结合 .clone(true)，你可以使用 detach 来避免 jquery live events：jsfiddle.net/b9chris/PNd2t
-
我还是看不出区别。如果我使用
remove而不是detach，该示例仍然有效。 -
@comecme：如果您已将诸如单击处理程序之类的事件绑定到跨度，请调用
remove()，然后再次附加它，绑定将消失，单击跨度将无济于事。如果您调用detach()并重新附加，则绑定保持不变，并且点击处理程序继续工作。 -
@Kumar 的回答关于 remove() 更正确一些，因为它没有从 DOM 中删除。这会产生影响，因为带有绑定事件的复杂元素如果没有被垃圾收集器足够快地处理掉，往往会占用大量浏览器内存。更快释放内存的技巧是 $(element).html('').remove();
-
hide() 将匹配元素的 CSS 显示属性设置为无。这意味着：你能描述一下 hide() 和 display:none 之间的区别吗？
想象一张桌子上的一张纸，上面有一些用铅笔写的笔记。
-
hide-> 把衣服扔到上面 -
empty-> 用橡皮擦删除笔记 -
detach-> 把纸拿在手里，留在那里以备不时之需 -
remove-> 抓起纸扔进垃圾箱
表格代表当前的DOM空间，paper代表元素，notes代表元素的内容（子节点）。
有点简化，并不完全准确，但很容易理解。
【讨论】：
hide() 将匹配元素的显示设置为无。
detach() 删除匹配的元素，包括所有文本和子节点。
此方法存储与元素关联的所有数据，因此可用于恢复元素的数据以及事件处理程序。
remove() 还会删除匹配的元素，包括所有文本和子节点。
但是，在这种情况下，只有元素的数据可以恢复，它的事件处理程序不能。
【讨论】：
在 jQuery 中，有三种方法可以从 DOM 中删除元素。这三个方法是.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>
这将导致删除 Hai 文本的 DOM 结构：
<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() 方法移除选定的元素，包括所有文本和子节点。但是，它保留数据和事件。此方法还保留已删除元素的副本，以便以后重新插入。
注意
.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>
【讨论】：