jQuery empty() method and :empty Selector
July 21, 2014
The empty() method is clear all element content and inside element content and :empty selector selects all empty element in document.
jQuery empty() Method
The empty() is jquery method to remove all child nodes of the set of matched element and content from the selected element. The empty() method is dose not remove element it's remove only data from element.Syntax
$(selector).empty();
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-child demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
})
</script>
</head>
<body>
<div>This is some text This is some text This is some text
<p>This is some text This is some text</p>
</div>
<p>This is some text This is some text</p>
<button>empty()</button>
</body>
</html>
jQuery :empty Selector
:empty selector select all empty element in document. In empty element, there is no text or data.Syntax
$(":empty")
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-child demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:empty").css('background','#003399');
})
</script>
<style>
div{width:300px; height:20px;}
</style>
</head>
<body>
<div>This is some text This is some </div>
<div></div>
<div>This is some text This is some text</div>
<div></div>
<p>This is some text This is some text</p>
<button>empty()</button>
</body>
</html>
