jQuery empty()

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

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 :

 $("htmlElement").empty();

Examples - jQuery empty()

Following examples help you understand the usage of jQuery empty() method :

Remove child elements of a DIV

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.

<!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>

Try Online

Conclusion

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