Remove DOM Elements Dynamically in jQuery

Sometimes we get a requirement to delete all child nodes and remove DOM elements using jQuery to make a dynamic web page. In this scenario jQuery provides a couple of methods to remove DOM elements. Here are the options:

empty()
remove()
html()

Let’s discuss how these methods work.

Option 1: empty()

This method helps to remove all child elements for a selected element.

Ex: $('#divTestArea1').empty();

When the preceding script executes it removes all its child elements of the div (divTestArea1).

Option 2: remove()

This method helps to remove the selected element with all the child elements.

Ex: $('#divTestArea1').remove();

When the preceding script executes, it removes an entire div (divTestArea1) with all its child elements.

Option 3: html()

This method helps to remove a selected element with all the child elements.

Ex: $('#divTestArea1').html(‘’);

When the preceding script executes, it removes all its child elements.

Analysis

Now we have multiple methods to remove elements. One question might occur to you of which one we should used and what is the difference.

Let’s start:

Difference between empty() and remove() method in jQuery

Let’s design an HTML page and implement those methods to understand it better. In HTML code I added three href links and one div (divTestArea1).

HTML Code

<body>
<a href="#" id="emptyLink">empty() div</a>
<a href="#" id="removeLink">remove() div</a>
<a href="#" id="htmlLink">html() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; border: 1px solid silver; background-color: #eee;">
<b>Bold text</b>
<i>Italic text</i>
</div>
</body>

JavaScript code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#emptyLink").click(function(){
$('#divTestArea1').empty();
});
$("#removeLink").click(function(){
$('#divTestArea1').remove();
});
$("#htmlLink").click(function(){
$('#divTestArea1').html('');
});
});
</script>

In the preceding script we bind the click event of the href link to remove elements. On clicking individual links it executes various methods.

Figure 1 displays HTML contents before the operation takes place. See, we have two links and one div.

Figure 1: Displaying HTML content before doing an operation

empty()

Clicking on the first link executes empty(). It removes all the child elements of the div.

Figure 2 shows that a div exists but the child nodes do not exist. Compare Figure 1 with Figure 2 and you will see the difference.

Figure 2: Displaying HTML content after empty() executes

remove()

Clicking on the second link executes remove() of jQuery. It removes the div with all its child elements.

Figure 3 shows the div is not there. That means the remove() method removes a selected element and all its child elements.

Figure 3: Displaying HTML content after remove() executes

Lastly empty() and html() work the same, that means they remove child nodes only. But empty() provides faster performance to remove all child elements as compared with html().

Conclusion

Previously we discussed 3 options to remove elements using jQuery. First, if you have the requirement to delete only child elements of a selected element (div/span/..) then use empty(). Second, if you want to delete a selected element with all its child elements then use remove(). In this way jQuery helps to remove child nodes, emptying a div, table, span, etc.

6 Comments

Join the conversation! Your thoughts help the community grow.

Ravi Patel11y ago
Nicely explained
Rakesh11y ago
Good one
Gowtham K11y ago
Good one
Santhakumar Munuswamy11y ago
Nice Article. Thanks for sharing
Rajeesh Menoth11y ago
Good One Manas Mohapatra
Karthikeyan K11y ago
Good one sir...Thanks for share