Introduction: jQuery provides various methods like .empty(), .remove() and .detach() to remove elements from DOM. And in this article, I will show you how
these methods .empty() vs .remove() are used to remove elements and different from each other with suitable
examples. I will explain .detach() method in upcoming article.
In previous articles I have explained How to Remove all except one or first or last item from dropdown using jquery and Check and display warning message if caps lock key is on using javascript and Add textbox search functionality in asp.net checkboxlist using jquery and Bootstrap modal dialog popup example in asp.net and Show animated bootstrap alert messages in asp.net
jQuery .remove() method
In previous articles I have explained How to Remove all except one or first or last item from dropdown using jquery and Check and display warning message if caps lock key is on using javascript and Add textbox search functionality in asp.net checkboxlist using jquery and Bootstrap modal dialog popup example in asp.net and Show animated bootstrap alert messages in asp.net
Let’s start with jQuery's .empty() method:
jQuery .empty() method
Description: The .empty() method clears the contents of the
selected element (e.g. <div> element), along with the child nodes (if
any). Let’s demonstrate with an example.
Syntax is $(selector).empty()
Implementation: Let's understand by an example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>jQuery empty() vs remove() Method
Examples</title>
<style>
.main {
background-color: pink;
border: solid 2px #000;
padding: 6px;
width:20%;
}
.inner {
background-color: cyan;
border: solid 2px #000;
padding: 6px;
}
</style>
<script>
$(document).ready(function () {
$('#btnRemoveMain').click(function () {
$('#dvMain').empty();
});
$('#btnRemoveInner').click(function () {
$('#dvInner').empty();
});
});
</script>
</head>
<body>
<div id='dvMain' class='main'>
Dummy
content inside the outer div
<div id='dvInner' class='inner'>
Dummy
content inside the inner div
</div>
</div>
<p>
<input type='button' id='btnRemoveMain' value='Remove Main'
<input type='button' id='btnRemoveInner' value='Remove Inner'>
</p>
</body>
</html>
Explanation:
Classes (.main and .inner) for adding border and
background color assigned to <div> elements, so that we can see only the
contents of the selected elements, along with other child elements (or nodes)
are removed.
If we want to clear the contents of main outer div
i.e. dvMain then click on the Remove Main button.
As we can see it cleared all the contents of this div,
along with other child elements (dvInner) and its contents. But border and
background of dvMain is there.
Note: Refresh page after each button click so that page comes into previous state.
If we just want to clear the contents of inner div
i.e. dvInner then click on the Remove Inner button.
As we can see in the image above it cleared all the contents
of inner div (dvInner). But border and background of dvInner is there.
Note: This method will not remove the parent (or the
selected) element from the page.
Now let's understand jQuery .remove() method:
Description: The .remove() method completely removes the selected
element from the web page along with other child elements and their contents.
In addition to this; jQuery data associated with the elements and all bound
events are also removed.
Syntax is $(selector).remove()
Implementation: Let’s demonstrate with an example.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>jQuery .empty() vs .remove() Method
Examples</title>
<style>
.main {
background-color: pink;
border: solid 2px #000;
padding: 6px;
width:20%;
}
.inner {
background-color: cyan;
border: solid 2px #000;
padding: 6px;
}
</style>
<script>
$(document).ready(function () {
$('#btnRemoveMain').click(function () {
$('#dvMain').remove();
});
$('#btnRemoveInner').click(function () {
$('#dvInner').remove();
});
});
</script>
</head>
<body>
<div id='dvMain' class='main'>
Dummy
content inside the outer div
<div id='dvInner' class='inner'>
Dummy
content inside inner div
</div>
</div>
<p>
<input type='button' id='btnRemoveMain' value='Remove Main'>
<input type='button' id='btnRemoveInner' value='Remove Inner'>
</p>
</body>
</html>
If we want to clear the contents of main outer div
i.e. dvMain then click on the Remove Main button.
As we can see it cleared the selected element i.e.
dvMain itself, along with other child elements (dvInner) and its contents.
Nothing left.
Similarly if we just want to clear the contents of
inner div i.e. dvInner then click on the Remove Inner button.
Note: Refresh page after each button click so that page comes into previous state.
Summary:
As we can see in the image above, it cleared all the
contents of selected div i.e. dvInner and its contents. Nothing left.
Note: This method removes the selected element from
the page completely.
remove() method removes all child elements with
selected element. In this method you can restore all data but not event
handlers of removed elements from the DOM. All data and events related with
elements will be removed. So Use .remove() when you want to remove the element
itself, as well as everything inside it.
empty() method removes all content and child elements
from the selected element. This method does not remove selected element. So use
.empty() if you want to remove inner contents not the element itself.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..