Open In App

jQuery :empty Selector

Last Updated : 06 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The :empty selector in jQuery is used to select empty elements. 

Syntax:

$(":empty")

Parameter: The :empty selector contains a single parameter empty which is mandatory and used to select an empty element which is an element without child elements or text. 

Example 1: This example uses :empty selector to select an element position in a table. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery :empty() Selector
    </title>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $(":empty").css("background-color", "green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1 id="geeks1" style="color:green;">
            GeeksForGeeks
        </h1>
        <h2 id="geeks2">jQuery :empty() Selector</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <tr>
                <td>Geeks 1</td>
                <td></td>
                <td>India</td>
            </tr>
            <tr>
                <td>Geeks 2</td>
                <td>2345</td>
                <td></td>
            </tr>
            <tr>
                <td>Geeks 3</td>
                <td>3456</td>
                <td>India</td>
            </tr>
            <tr>
                <td>Geeks 4</td>
                <td>4567</td>
                <td>India</td>
            </tr>
            <tr>
                <td>Geeks 5</td>
                <td>5678</td>
                <td>U.S.</td>
            </tr>
            <tr>
                <td></td>
                <td>6789</td>
                <td>Austrialia</td>
            </tr>
            <tr>
                <td>Geeks 7</td>
                <td></td>
                <td>India</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output:

  

Example 2: This example use : empty selector to select an empty element. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery :empty() Selector</title>
    <script src=
    </script>
    <!-- Script to use empty selector -->
    <script>
        $(document).ready(function () {
            $("div:empty(.GFG)").css("background-color", "green");
        });
    </script>
    <!-- Style to create box -->
    <style>
        .GFG {
            width: 200px;
            height: 40px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <div class="GFG"></div>
</body>
 
</html>


Output:

 



Previous Article
Next Article

Similar Reads

CSS :empty Selector
The: empty selector is used to select that element that does not contain any children (including text node). Syntax: :empty { /* CSS property */}Example: In this example, we are using the above-explained selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;empty selector&lt;/title&gt; &lt;style&gt; h1 { color: green; }
1 min read
jQuery :input Selector
The jQuery :input selector in jQuery is used to select input elements. This selector is also used with button element. Syntax: $(":input")Note: jQuery :input selector not only selects input elements but also Buttons, Dropdowns, and Textarea elements. Example 1: This example use :input selector to count all input elements. C/C++ Code &lt;!DOCTYPE ht
2 min read
jQuery :nth-of-type() Selector
The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of the specified parent. Syntax: parent_name : nth-of-type(n|even|odd|algebraic equation)Parameters: It takes a parameter n | even | odd | algebraic equation. ValueDescriptionnSelect the child present at nth index (starting from 1). n must be an integer.e
3 min read
jQuery :enabled Selector
The jQuery :enabled selector is used to select all enabled form elements. Syntax : $(":enabled")Parameter: :enabled selector: It is used for selecting HTML elements that support the disabled attribute. i.e button tag, input tag, optgroup tag, option tag, select tag and textarea tag.Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
1 min read
jQuery element Selector
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript developm
1 min read
jQuery :last Selector
The jQuery :last Selector is used to select the last element of the specified type. Syntax: $(":last")Example 1: In this example, we will select the last &lt;p&gt; element by using jQuery :last Selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
1 min read
jQuery :button Selector
The jQuery :button selector selects button elements and input elements with type="button". The button element is not selected if we use input=" button" as a selector. Syntax: $(":button") Example 1: In this example, we are using jQuery: button Selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery :button Selector
1 min read
jQuery :animated Selector
The jQuery :animated Selector is an inbuilt selector which is used to select the element that is currently animated. Syntax: $(:animated)Below examples illustrate the animated selector in jQuery: Example 1: In this example, we will select the animated element by using jQuery animated Selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head
2 min read
jQuery :header Selector
The jQuery :header Selector is used to select all the heading elements that are from (&lt;h1&gt; to &lt;h6&gt;). Syntax: $(":header") Example 1: Change the color of all headings to green. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery :header Selector&lt;/title&gt; &lt;script src= &quot;https://ajax.googleapis.com/aj
1 min read
jQuery #id Selector
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript devel
1 min read