Open In App

Difference between remove() and detach() Methods

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
    "https://releases.jquery.com/git/jquery-git.js">
    </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=
"https://releases.jquery.com/git/jquery-git.js">
   </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. 

Next Article
Getting Started with jQuery

H
hrtkdwd
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox