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

后端未结

关注

 5  2041

忘了有多久

What is the functional difference between these three jQuery methods:

detach()
hide()
remove()

相关标签:

5条回答

走了就别回头了

2020-11-28 03:09
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
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
眼角桃花

2020-11-28 03:15

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

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

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.

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-11-28 03:15
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.

.hide()

Hide the matched elements. With no parameters, the .hide() method is the simplest way to hide an HTML element:
```
$(".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.

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.

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:
```
<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.

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

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.

EXAMPLE

Consider the following 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 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.

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

Note

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

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
0 讨论(0)
发布评论:

提交评论
- 加载中...

感动是毒

2020-11-28 03:26

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

0 讨论(0)

春和景丽

2020-11-28 03:32
hide() sets the matched elements' CSS display property to none.

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

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

To re-insert a detached element into the DOM, simply insert the returned jQuery set from detach():
```
var span = $('span').detach();

...

span.appendTo('body');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...