Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery empty() Method
jQuery | empty() Method: Learn about the jQuery empty() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022
empty() Method
As the name suggests, the empty() method helps to remove all the selected elements from the web page. This method removes all the child elements of the selected DOM element. It, along with deleting the child node, also removes the content and attributes of them. This method is a lot similar to the remove() method of jQuery.
empty() Method Syntax
$('selector').empty();
It has a simple syntax, where the element to be removed is specified through its selector. This method does not take in any parameters. It will delete all the elements that are matched with the provided selector.
The below example shows the implementation of the empty() method. When the empty button is clicked, it triggers the empty() method which then removes the selected element. The elements can be selected on the basis of – id, tag name, classes, etc.
jQuery empty() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.bold{
font-size: larger;
font-weight: bolder;
color: green;
}
.color{
font-size: larger;
font-weight: bolder;
color:darkblue;
}
</style>
<title>Document</title>
</head>
<body>
<h2>jQuery - Empty</h2>
<p>Click the button to Empty some of the selected elements.</p>
<button>Empty</button>
<hr>
<p class="bold">This is sentence in green.</p>
<div class="color">This is sentence in blue.</div>
<h4 class="bold">This is sentence in green.</h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('.bold').empty();
})
});
</script>
</html>
Output:
