jQuery – Empty selector example

In jQuery, the “empty” selector is used to select all elements that have no children (including any text inside).

Examples


<div class="div-class1">
   This is div-class1
</div>

<div class="div-class2" />

$(‘:empty’) – The “div-class2” is matched, while the “div-class1” is not.

jQuery Example

A simple example to show the use of the jQuery “empty” selector.


<html>
<head>
<title>jQuery empty example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	div{
		padding:8px;
		border:1px solid;
	}
</style>
</head>

<body>

<h1>jQuery empty example</h1>

<div class="div-class1">
	This is div-class1
</div>

<div class="div-class2" />

<div class="div-class3">
	This is div-class3
	<div class="div-class3-1">
		This is div-class3-1
	</div>	
</div>

<br/><br/>

<button>:empty</button>

<script type="text/javascript">
    $("button").click(function () {
      var str = $(this).text();
      $("*").css("background", "white");
      $(str).css("background", "coral");
    });
</script>

</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
newest oldest most voted