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. |
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!