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 :
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>Try Online
<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.