Explain the differences between empty() remove() and detach() methods in jQuery
Last Updated :
21 Mar, 2022
If you are building something and want to remove some HTML elements on click, hover, or on any event then you should know that jQuery can do it easily for us. There are three jQuery methods that help us to remove HTML elements with some slight differences. These methods are:
- remove() Method: It completely removes the selected elements from DOM. It also removes event handlers and data associated with the selected element. Data associated with the removed element can be restored but event handlers can’t be restored.
- detach() Method: It also removes the selected element along with all of its child elements but the copy of the removed elements is kept to reuse at a later time.
- empty() Method: It removes all the child elements from the selected element but does not remove the selected element itself.
Let’s understand this with an example:
Example 1: This example illustrates the use of remove() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
.container {
background-color: yellow;
width: 700px;
height: 300px;
}
.child-block {
background-color: red;
width: 30%;
height: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="child-block"></div>
</div>
<button class="remove">remove</button>
<script>
$(".remove").click(function () {
$(".container").remove();
});
</script>
</body>
</html>
|
Output::
.remove()
As you can see from the above output screenshots that on clicking the remove button yellow block along with its child red block got removed.
Example 2: This example illustrates the use of detach() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
.container {
background-color: yellow;
width: 700px;
height: 300px;
}
.child-block {
background-color: red;
width: 30%;
height: 50%;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="container">
<div class="child-block"></div>
</div>
<div class="attach"></div>
<button class="detach">
remove
</button>
<button class="insert">
Insert
</button>
</center>
<script>
let removed;
$(".detach").click(function () {
removed = $(".container").detach();
});
$(".insert").click(function () {
removed.appendTo(".attach");
});
</script>
</body>
</html>
|
Output:
detach()
As you can see when first we click the remove button it removed the container element and all of its child element but since detach() is used all event handlers and data is stored in the ,their,removed variable due to which we appended all removed element again in the body on clicking insert button.
Example 3: This example illustrates the use of empty() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
.container {
background-color: yellow;
width: 700px;
height: 300px;
}
.child-block {
background-color: red;
width: 30%;
height: 50%;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="container">
<div class="child-block"></div>
</div>
<button class="empty">empty</button>
</center>
<script>
$(".empty").click(function () {
$(".container").empty();
});
</script>
</body>
</html>
|
Output:
empty()
As you can see that clicking the empty button removes child div from container div(which is a parent element) therefore red block got removed.
Difference between empty(), remove() and detach() methods:
| remove() |
detach() |
empty() |
| It removes the matched element and its child elements from DOM. |
It removes the matched elements and its child elements from DOM. |
It removes only the child element of the matched element. |
| It also removes all event handlers, data etc. present inside the matched element |
It keeps data of the detached element and can be reused. |
It removed data, event handlers etc. of child elements. Matched element and its data remain safe. |
| If an element got removed It cannot be inserted again in the DOM. |
The detached element can be inserted again inside DOM very easily. |
If an element is emptied its child elements cannot be inserted again. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...