Home  >  jQuery

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(); 
This method cannot pass any argument.
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> 
Find the output.
jQuery empty() method and :empty Selector
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us