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>
<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>
<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. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...