Javascript detach()、hide() 和 remove() 之间的区别 - jQuery

Differences between detach(), hide() and remove() - jQuery

提问by Vivek

What is the functional difference between these three jQuerymethods:

这三种jQuery方法的功能区别是什么：

• detach()
• hide()
• remove()

• 分离（）
• 隐藏（）
• 消除（）

回答by Jacob Relkin

hide()sets the matched elements' CSS displayproperty to none.

hide()将匹配元素的 CSSdisplay属性设置为none.

remove()removes the matched elements from the DOM completely.

remove()从 DOM 中完全删除匹配的元素。

detach()is like remove(), but keeps the stored data and events associated with the matched elements.

detach()类似于remove()，但保留与匹配元素关联的存储数据和事件。

To re-insert a detached element into the DOM, simply insert the returned jQueryset from detach():

要将分离的元素重新插入 DOM，只需插入从 返回的jQuery集合detach()：

var span = $('span').detach();

...

span.appendTo('body');

回答by Zoltán Tamási

Imagine a piece of paper on a table with some notes written with pencil.

想象一张桌子上的一张纸，上面有一些用铅笔写的笔记。

• hide-> throw a clothe onto it
• empty-> remove the notes with an eraser
• detach-> grab the paper in your hand and keep it there for whatever future plans
• remove-> grab the paper and throw it to the dustbin

• hide-> 把衣服扔到上面
• empty-> 用橡皮擦删除笔记
• detach-> 拿起你手中的纸，放在那里以备将来的任何计划
• remove-> 抓起纸扔进垃圾箱

The paper represents the element, and the notes represent the contents (child nodes) of the element.

纸代表元素，注释代表元素的内容（子节点）。

A bit simplified and not completely accurate, but easy to understand.

有点简化，并不完全准确，但很容易理解。

回答by Kumar

hide()sets the matched element's display to none.

hide()将匹配元素的显示设置为无。

detach()removes the matched elements, including all text and child nodes.

detach()删除匹配的元素，包括所有文本和子节点。

This method stores all the data associated with the element and so can be used to restore the element's data as well as event handlers.

此方法存储与元素关联的所有数据，因此可用于恢复元素的数据以及事件处理程序。

remove()also removes the matched elements, including all text and child nodes.

remove()还会删除匹配的元素，包括所有文本和子节点。

However, in this case only the element's data can be restored, not its event handlers can't.

但是，在这种情况下，只能恢复元素的数据，而不能恢复其事件处理程序。

回答by Jason

In jQuery, there are three methods for removing elements from the DOM. These three methods are .empty(), .remove(), and .detach(). All these methods are used for removing elements from the DOM, but they all are different.

在 jQuery 中，有三种方法可以从 DOM 中删除元素。这三种方法是.empty()，.remove()和.detach()。所有这些方法都用于从 DOM 中删除元素，但它们都不同。

.hide()

。隐藏（）

Hide the matched elements. With no parameters, the .hide() method is the simplest way to hide an HTML element:

隐藏匹配的元素。没有参数， .hide() 方法是隐藏 HTML 元素的最简单方法：

$(".box").hide();

.empty()

。空的（）

The .empty() method removes all child nodes and content from the selected elements. This method does not remove the element itself, or its attributes.

.empty() 方法从所选元素中删除所有子节点和内容。此方法不会删除元素本身或其属性。

Note

笔记

The .empty() method does not accept any argument to avoid memory leaks. jQuery removes other constructs, such as data and event handlers, from the child elements before removing the elements themselves.

.empty() 方法不接受任何参数以避免内存泄漏。jQuery 在删除元素本身之前从子元素中删除其他构造，例如数据和事件处理程序。

Example

例子

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>

This will result in a DOM structure with the Hai text deleted:

这将导致删除 Hai 文本的 DOM 结构：

<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>

If we had any number of nested elements inside <div class="hai">, they would be removed too.

如果我们在里面有任意数量的嵌套元素<div class="hai">，它们也会被删除。

.remove()

。消除（）

The .remove() method removes the selected elements, including all text and child nodes. This method also removes the data and events of the selected elements.

.remove() 方法删除选定的元素，包括所有文本和子节点。此方法还会删除所选元素的数据和事件。

Note

笔记

Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to this, all bound events and jQuery data associated with the elements are removed.

当您想要删除元素本身以及其中的所有内容时，请使用 .remove() 。除此之外，所有与元素关联的绑定事件和 jQuery 数据都将被删除。

EXAMPLE

例子

Consider the following html:

考虑以下 html：

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>

This will result in a DOM structure with the <div>element deleted:

这将导致<div>删除元素的 DOM 结构：

<div class="content">
<div class="goodevening">good evening</div>
</div

If we had any number of nested elements inside <div class="hai">, they would be removed too. Other jQuery constructs, such as data or event handlers, are erased as well.

如果我们在里面有任意数量的嵌套元素<div class="hai">，它们也会被删除。其他 jQuery 构造，例如数据或事件处理程序，也会被删除。

.detach()

。分离（）

The .detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events. This method also keeps a copy of the removed elements, which allows them to be reinserted at a later time.

.detach() 方法删除选定的元素，包括所有文本和子节点。但是，它保留数据和事件。此方法还保留已删除元素的副本，以便稍后重新插入。

Note

笔记

The .detach() method is useful when removed elements are to be reinserted into the DOM at a later time.

.detach() 方法在稍后将删除的元素重新插入 DOM 时很有用。

Example

例子

<!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>

For more info, visit: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

更多信息，请访问：http: //www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

回答by Xuan Nguy?n

<!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>