Explain the differences between empty() remove() and detach() methods in jQuery
Last Updated :
31 Jul, 2024
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=
"https://code.jquery.com/jquery-3.6.0.min.js"
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:
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=
"https://code.jquery.com/jquery-3.6.0.min.js"
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:
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=
"https://code.jquery.com/jquery-3.6.0.min.js"
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:
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. |
Similar Reads
Difference between remove() and detach() Methods 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 r
2 min read
Difference between text() and html() method in jQuery Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selec
2 min read
What is the difference between eq() and get() methods in jQuery ? In this article, we will discuss all the differences between eq() and get() methods in jQuery. eq() Method: This method is used to locate the selected elements directly and returns an element with a specific index. Syntax: $(selector).eq(index) Example: In this example, we will set the different te
2 min read
Difference between hover() and mouseover() methods in jQuery Before learning the difference between the hover() and mouseover() method of jQuery, let's briefly see both methods. hover() Method: When we hover our mouse cursor to any element, two events happen i.e. mouseenter and mouseleave. mouseenter: When we bring the cursor over the element.mouseleave: When
3 min read
Difference between html() text() and val() methods in jQuery In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage. 1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content
4 min read
What's the difference between selector and filter() in jQuery? jQuery Selectors: allow us to select and manipulate HTML element(s). It is used to select HTML elements such as ids, classes, types, attributes, etc using jQuery selectors and then add any CSS properties or events to the selected HTML elements. Syntax: For selecting a button tag the syntax would be
2 min read
What is the difference between position() and offset() in jQuery ? Both the jQueryUI method the returns the object which contains integer co-ordinate properties of the top and left positions. The positions of top and left coordinates are returned in pixels. Both functions are applied only on visible elements, not on hidden elements. Example: The example gives top a
2 min read
Difference between Set.clear() and Set.delete() Methods in JavaScript Both Set.clear() and Set.delete() methods modify the present Set by removing elements. But there are some fundamental differences between these two, which will be discussed in this article. Set.clear() Method: In this method, all the elements in the set get deleted. So, as a result, the set becomes
2 min read
Difference between on() and live() or bind() in jQuery jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector
3 min read
What is the difference between find() and filter() methods in JavaScript ? In this article, we will see the difference between the find() and filter() methods in javascript. JavaScript find() method: The find() method is used to find all the descendant elements of the selected element. It finds the element in the DOM tree by traversing through the root to the leaf. Syntax:
2 min read