Difference between jQuery .empty() and .remove() Methods

The difference is very simple. The jQuery .empty() method will clear or remove the contents inside an element, including the child nodes that are nested inside the parent or the selected element. Whereas the jQuery .remove() method will remove the selected element along with its contents and other nested elements (or child elements) and its contents.

Let’s see how both the methods work.

jQuery .empty() method

The syntax ...

$(selector).empty()

The .empty() method will clear the contents of the selected element (let’s say a <div> element), along with the child nodes (if any). Here’s an example.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>jQuery .empty() Method Example</title>
    <style>
    	input, div {
            font: 1em Calibri;
        }
    </style>
</head>
<body>
    <div id='container' style='border: solid 1px #ccc; padding: 5px;'>
    	
        Contents inside the parent DIV
        
        <div id='d1'>
            content inside d1
        </div>
        
        <div id='d2'>
            content inside d2
        </div>
    </div>
    
    <p>
    	<input type='button' id='bt' value='Click it!'>
    </p>
</body>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            $('div').empty();
        });
    });
</script>
</html>

Try it

I have especially added borders to the container (or the parent <div> element), so you can see that only the contents of the selected elements, along with other child elements (or nodes) are removed.

Note: This method will not remove the parent (or the selected) element from the page.

Now, you can add any other element (other than <div>) in the container and see what happens.

In-addition, you can clear or empty contents of individual elements, by using either the element’s id or the class name. For example, I have a <div> element with id d1. If I want to empty or clear the contents of this element only, I would do something like this…

$('#d1').empty();

jQuery .remove() method

The .remove() method will remove the selected element (or the parent element), completely, from the web page. Although, you can save the contents of the removed element, you however cannot retrieve the events or data of the element that you have removed.

Here’s an example.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>jQuery .remove() Method Example</title>
    <style>
    	input, div, p {
            font: 1em Calibri;
        }
    </style>
</head>
<body>
    <div id='containter' style='border: solid 1px #ccc; padding:5px;'>
    	
        Contents inside the parent DIV
        
    	<div id='d1'>
            content inside d1
        </div>
        
        <div id='d2'>
            content inside d2
        </div>
        
        <p>
            content inside P element 
        </p>
    </div>
    
    <p>
    	<input type='button' id='bt' value='Click it!'>
    </p>
</body>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            $('div').remove();
        });
    });
</script>
</html>

Try it

Clicking the button will remove the selected (or the parent, or the container) element from web page. You will see no borders, nothing. The method removes everything associated with the element.

You can apply the .remove() method to individual elements. For example,

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

Conclusion

Use the methods wisely. You can apply both .empty() and .remove() methods on any element. Once the element(s) and its contents are removed, it will free the memory that the elements have used.

← PreviousNext →