What is .detach() and .remove() in jQuery ?

Raj Bhatt

1.8k

The .detach() and .remove() methods are both used in jQuery to remove elements from the DOM (Document Object Model).

The .detach() method removes the selected elements from the DOM and stores them in memory, so they can be reinserted later.
This method preserves all attached event handlers and other data associated with the removed elements.

In other words, it is a way to temporarily remove an element from the DOM while keeping all of its data intact.

Here is an example of using .detach():

Syntax
// detach the element with id “mydiv”

$('#mydiv').detach();

```html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("h1").detach();});
});
</script>
</head>
<body><h1>This is a paragraph.</h1>
<h2>This is another paragraph.</h2>
<button>Remove</button></body>
</html>

The .remove() method, on the other hand, removes the selected elements from the DOM completely, without storing them in memory.
This method also removes any event handlers and data associated with the removed elements.
In other words, it is a way to permanently remove an element from the DOM.

Here is an example of using .remove():

// remove the element with id “mydiv”

$('#mydiv').remove();

<!DOCTYPE html>

In jQuery, both .detach() and .remove() methods are used to remove an element from the DOM (Document Object Model). However, there is a subtle difference between the two:

.remove() method: This method removes the selected element(s) from the DOM, including all its events and data.
.detach() method: This method removes the selected element(s) from the DOM, but it keeps all its events and data associated with it. The removed element(s) can be reinserted back into the DOM at a later time.

Tuhin Paul