HTML METHODS - empty()

The empty() method in JQuery is used to delete the child elements from an HTML element.

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "outerClass" style = "background-color : violet; height : 130px">
    		Inside outer div class
    		<div class = "innerClass" style = "background-color : orange; height: 100px">
    			Inside inner div class
    			<p style = "background-color : green">
                	New Code
                </p>
    		</div>
    	</div>		
    	
    	<button> Click to delete </button>
    	

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('.outerClass').empty();
			});
			            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have two <div> elements and a <p> element,

<div class = "outerClass" style = "background-color : violet; height : 130px">
	Inside outer div class
	<div class = "innerClass" style = "background-color : orange; height: 100px">
		Inside inner div class
		<p style = "background-color : green">
			New Code
		</p>
	</div>
</div>

And the DOM structure for the above <div>'s and <p> element is,

So, if we look at the DOM structure, there is a parent <div> with class name outerClass. And inside it there are two elements, a text element (i.e. Inside outer div class) and another <div> with class name innerClass.

And the inner <div> with class name innerClass has two elements, a text element (i.e. Inside inner div class) and another <p> element with text New Code.

We have put style = "background-color : violet; height : 130px" in the outer <div>,

<div class = "outerClass" style = "background-color : violet; height : 130px">

To represent a violet box.

Now, if you look at the JQuery statement,

$('button').click( function() {
	$('.outerClass').empty();
});

We have called the empty() method on the outer <div> with class name outerClass,

$('.outerClass').empty();

And if you see the output, on click all the children of outer <div> gets deleted.

But the important thing to note is the outer <div> itself doesn't get deleted,

<div class = "outerClass" style = "background-color : violet; height : 130px">

And how do you understand that?

Just take a look at the violet box. Everything is deleted but the violet box is left. The violet box is the <div> with class = "outerClass".

And that is because the empty() method deletes the children of the selected element but doesn't delete the element itself.

Now let us take the same example using remove() method.

Rewriting the above example using remove() method

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "outerClass" style = "background-color : violet; height : 130px">
    		Inside outer div class
    		<div class = "innerClass" style = "background-color : orange; height: 100px">
    			Inside inner div class
    			<p style = "background-color : green">
                	New Code
                </p>
    		</div>
    	</div>		
    	
    	<button> Click to delete </button>
    	
      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('.outerClass').remove();
			});
			            
      	</script>      
   </body>
</html>

Output :

Now, if you see the output, the elements along with the violet box got removed. That is because the remove() method deletes the actual element along with its child element.

❮❮ PREV NEXT ❯❯