• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Empty Selector Example

May 19, 2014 //  by Krishna Srinivasan//  Leave a Comment

This tutorial highlights the benefits and usage of the empty selector in JQuery. JQuery empty selector selects all the elements that have no children. It represents the elements with no children which includes element nodes, text nodes etc. The comments or processing instructions which are not treated as child elements and they do not affect whether an element is considered empty or not. The empty method removes the text nodes within the selected elements, but does not remove the attributes and elements by itself. If text node contains data length of zero, then it is considered as empty. A single space in text node is not empty.

JQuery Empty Selector Syntax

$(“:empty”)

JQuery Empty Selector Example

<!doctype html>
<head>
<title>JQuery Empty Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Empty Selector Example</h2>
<style>
.box{
background:orange;
height:100px;
width:200px;
</style>
<script>
   $(document).ready(function(){
	$(":empty").css("background-color", "brown");
   });
</script>
<body>
<div class="box"></div>
<div class="box">This is not empty box</div>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“:empty”).css(“background-color”, “brown”); line defines empty selector which represents all the elements that have no children.
  • When we run the above script, we will get two boxes. The empty box will get appear in the brown color and non empty box will get appear in the orange color.

JQuery Empty Selector Demo

  • Run This Demo

When you run the above example, you would get the following output:

JQuery Empty Selector Demo

Category: jQueryTag: JQuery Selectors

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Spring Data + MongoDB + REST Shell Integration
Next Post: PrimeFaces 5 + Spring Data + MySQL Integration »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

EJB 3.0 Timer Services

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact