Difference between remove() and detach() Methods

Last Updated : 9 Jul, 2026

Both .remove() and .detach() are jQuery methods used to remove elements from the DOM. The difference is that .remove() deletes the element along with its data and event handlers, whereas .detach() preserves them for later reuse.

  • Both methods can be applied to one or more selected elements.
  • .remove() permanently deletes associated data, while .detach() retains it.

.remove() Method

The .remove() method removes the selected element from the DOM along with all of its child elements, attached events, and associated data.

  • Removes the selected element and all its descendants from the DOM.
  • Deletes associated event handlers and jQuery data.
  • The removed element cannot be restored unless recreated.
  • Best suited for permanently deleting elements.
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() Method

The .detach() method removes the selected element from the DOM but preserves its associated data and event handlers, allowing it to be reinserted later.

  • Removes the selected element from the DOM without deleting its data.
  • Preserves attached event handlers and jQuery data.
  • The detached element can be reinserted into the DOM later.
  • Useful for temporarily removing elements while retaining their state.
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():

Feature.remove().detach()
PurposePermanently removes the selected element from the DOM.Temporarily removes the selected element from the DOM.
Element RemovalRemoves the element along with all of its child elements.Removes the element but allows it to be reused later.
jQuery DataDeletes all data associated with the removed element.Preserves all data associated with the detached element.
Event HandlersRemoves all attached event handlers.Keeps all attached event handlers intact.
Reinserting ElementThe removed element cannot be directly reinserted.The detached element can be reinserted into the DOM.
Typical Use CaseWhen the element is no longer required.When the element needs to be removed temporarily and reused later.

When to Use Each Method

Use these methods based on your requirement:

  • Use .remove() when the element is no longer needed.
  • Use .detach() when the element may be added back later.
  • Prefer .detach() if you want to preserve events and stored data.
  • Use .remove() to free memory by permanently deleting the element.
Comment

Explore