empty selector in jQuery with example

Home » JQuery » jQuery Selectors » empty selector in jQuery with example

empty selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

Empty selector returns all elements that do not have child element nodes.

Example :

    <html>
    <head>
    <title>empty Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $(":empty").text("This is div.").css({'background-color':'Green','font-size':'20px'});
    });
    });
    </script>
    </head>
    <body>
    <div></div>
    <button id="myButton">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

In the above example, we have used empty selector. Empty selector returns all elements that do not have child element nodes. In the above example the empty selector selects the empty div and applies CSS and adds content to it.