jQuery :empty Selector

Last Updated : 06 Jul, 2023

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>