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 :
$("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.
<!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.