Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Difference between remove() and detach() Methods

  • Last Updated : 04 Aug, 2021

Before looking at the differences between these two methods of jQuery, let us understand the methods first.

remove(): This remove() method removes the matched elements from the DOM. When we apply the remove() method to any element, then everything inside that element and the element itself will be removed from the DOM. All nested elements, event handlers, or any type of data present inside that element will be removed.

Syntax:

$('selector').remove();

Example:

HTML




<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
    </script>
</head>
  
<body>
    <div class="test">
        <p>Hello Geeks!</p>
  
        <p>Hey Hello</p>
  
    </div>
  
    <button>Click here to remove above element</button>
    <script>
        // Removing class test from DOM
        $("button").click(function () {
            $(".test").remove();
        })        
    </script>
</body>
  
</html>


 



Output:

remove method

detach(): The detach() method is almost the same as the above remove() method. The only difference is that detach() method keeps all the data associated with that removed element. And all our data are kept safe, so we can reinsert them into DOM whenever we want.

This method is basically used when we want to remove any element but we don’t want to remove it completely so that we can reinsert that removed element later.

Syntax:

$(selector).detach()

Example: We will first, remove an element from the DOM and after that, we will try to reinsert that removed element back into DOM.

HTML




<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
   </script>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
  
    <button id="detach">Detach h3 tag</button>
    <button id="attach">Attach to DOM</button>
    <script>
        // A variable to store the data 
        // of removed element
        let rem; 
  
        // Removing h3 tag first
        // on clicking detach button
        $("#detach").click(function () {
            rem = $("h2").detach();
        })
  
        // Reinserting h2 tag 
        // on clicking attach button
        $("#attach").click(function(){
            rem.appendTo("body");
        })
  
    </script>
</body>
  
</html>

Output:

                    

Detach and attach

Difference between .remove() and .detach():

remove()detach()
It removes the matched element from the DOM.It also removes the matched element from the DOM.

It does not keep the data of the removed elements.

Like, all child elements, event handlers, and any type of data present inside the element will be removed.

It keeps the data of the detached elements.

Everything present inside the detached element is kept safe.

It is not possible to reinsert the removed element back into the DOM.We can easily reinsert elements into the DOM whenever we want. 



My Personal Notes arrow_drop_up
Recommended Articles
Page :