jQuery empty()

Unlike remove() method, jQuery empty() does not entirely remove the DOM element, but removes child elements of the selected HTML element(s).

In this tutorial, you will learn about jQuery empty() method, its syntax and usage, with examples.

Syntax – jQuery empty()

To remove the child elements of selected HTML element(s) permanently from DOM using jQuery, use empty() method on the jQuery selection. Following is the syntax of jQuery empty() method :

</>
Copy
$("htmlElement").empty();

Examples – jQuery empty()

The following examples help you understand the usage of jQuery empty() method.

1. Example – Remove child elements of a DIV

Following example demonstrates the working of jQuery empty() method, where it removes the child elements of div with id=”desc”, but not the div.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#btnAct").click(function(){
 $("div#desc").empty();
 });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>
 
 <div id="desc" style="background:#DDD;border:1px solid #CCC;padding:20px;margin:10px;">
  <p class="abc">A paragraph.</p>
  <p>Another paragraph.</p>
 </div>

 Some List
 <ul>
  <li class="abc">Item 1</li>
  <li>Item 2</li>
 </ul>

 <button id="btnAct">Remove div with id=desc</button>

</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery empty() method : Syntax and Usage with examples.