Updated March 23, 2023
Introduction to jQuery empty()
The jQuery empty( ) method is used to remove all contents and child elements from the selected html elements. It is a built-in method of jQuery. This method does not remove itself element, just it removes the content of the selected element and all the child elements of the selected element along with the content as well. The jQuery detach( ) method also can be used to perform the same task, but this method only removes the child element without removing its events and data, also the jQuery remove( ) method can be used to perform the same task and this method removes the child element with its events and data.
Syntax
The syntax of the jQuery empty( ) method
$(selector).empty( )This method is used to remove the content and all child elements of the selected html element. This method does not accept any parameters.
Example for the jQuery empty( )
Here are the following examples mentioned below
Example #1
Example of jQuery empty() method to run on the single selected html element –
Next, we write the html code to understand this method more clearly with the following example, the empty ( ) method used to remove the content and elements of the div element when click the button element –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for empty ( ) method </title>
<!-- code to show the jQuery empty ( ) working method -->
<script>
$(document).ready(function() {
$( "button").click(function() {
$( "body" ).empty();
});
});
</script>
<style>
p {
width: 500px;
height: 150px;
margin: 15px;
padding: 10px;
background-color: red;
font-weight: bold;
font-size: 25px;
}
button {
background-color: yellow;
margin: 10px;
}
</style>
</head>
<body>
This is a content of the body.
<p> This is the first child element of the body. </p>
<!-- click on this button to execute empty( ) method -->
<button> This is the second child element of the body and Click here..! </button>
</body>
</html>Output:
Once we click the button, there is no output everything is moved from the page because all the content and the child elements of the < body > get removed.
Example #2
Example of jQuery empty ( ) method to run on the single selected html element –
Next, we write the html code to understand this method more clearly with the following example, the empty() method used to remove the content and elements of the div element when click the button element –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for empty ( ) method </title>
<!-- code to show the jQuery empty ( ) working method -->
<script>
$(document).ready(function(){
$( "#btn" ).click(function(){
$( "div" ).empty();
});
});
</script>
</head>
<body>
<div style="height : 100px; background-color : red" >
This text is a content of the div tag. <br/>
<p> <b>This Paragraph is the child element of the div tag. </b> </p>
</div>
<p>This paragraph is outside of the div tag. </p>
<button id= "btn" > Clich here to remove the content and child elements of div element.
</button>
</body>
</html>Output:
Once we click the button, the output is –
In the above code the empty ( ) method is using on the selected element that is < div > html elements in the collection, so once we click the button, the empty ( ) is executed and which removes the content and its child element that is < p > html element, as we can see in the output of the code.
Example #3
Example of jQuery empty ( ) method to run on multiple html elements –
Next example code where the jQuery empty ( ) method to run and remove the content of the multiple < div >html element, as in the below code –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for empty ( ) method </title>
<!-- code to show the jQuery empty ( ) working method -->
<script type= "text/javascript" language= "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).empty();
});
});
</script>
<style>
.div{ margin : 12px; padding : 10px; border : 3px solid #666; width:60px;}
</style>
</head>
<body>
<h2> Click any below box to see the working of empty( ) method : </h2>
<!-- click to execute the jQuery empty ( ) method -->
<div class= "div" style="background-color: red; "> Click me! </div>
<div class="div" style="background-color: yellow;"> Click me! </div>
<div class="div" style="background-color: green;"> Click me! </div>
</body>
</html>Output:
Once we Click any of the boxes, the output is –
In the above code the empty ( ) method is using on the multiple occurrences of selected <div> html element, so once we click any of the boxes, the empty ( ) method is executed and which removes the content of the clicked box, as we can see in the output of the code.
Conclusion
The empty( ) method is a built-in method of the jQuery, which is used to remove all the contents and child elements from the selected html elements, as we have seen with an example. This method does not accept any parameters. The jQuery detach( ) and jQuery remove( ) methods can be used to perform the same task, with some difference.
Recommended Articles
This is a guide to jQuery empty(). Her we discuss the examples of jQuery empty( ) which is used to remove all the contents and child elements from the selected html elements. You may also look at the following article.
