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
JQuery Empty Selector Example
<title>JQuery Empty Selector</title>
<h2>JQuery Empty Selector Example</h2>
<div class="box">This is not empty box</div>
- $(“: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
When you run the above example, you would get the following output: