:empty Selector

Categories: Selectors > Content Filter

empty selector

version added: 1.0jQuery(':empty')

Description: Select all elements that have no children (including text nodes).

This is the inverse of :parent.

One important thing to note with :empty (and :parent) is that child elements include text nodes.

The W3C recommends that the <p> element have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.

Example:

Finds all elements that are empty - they don't have child elements or text.

<!DOCTYPE html>
<html>
<head>
  <style>

  td { text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>

    <tr><td></td><td>TD#5</td></tr>
  </table>
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :empty Selector or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to :empty Selector? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

http://twitter.com/kurtextrem Kurt

is this empty, too?

<script>
var foo = 'bar';
</script>
?
Kevsta

Unfortunately line breaks are considered as content to elements in FF and Chrome.

Take for example:
<div>
</div>
<div></div>

Only the second div will be considered empty with:
$(“div:empty”).text(“Was empty!”).css('background', 'rgb(255,220,200)');

The same goes for .text() if you iterate through the divs:
$(“div”).each(function () {
if ( $(this).text() == “”) $(this).text(“Was empty!”).css('background', 'rgb(255,220,200)');
})
Only the last one will be considered as empty text.

IE seems to be fine in both cases though, and selects both divs.

Body seems to be a different matter.
Under Chrome:
Line break or no line break, :empty doesn't work.

Under FF:
No line break, :empty works
Line break, :empty doesn't work.

Under IE:
Line break or no line break, :empty works.

But in your case Kurt, body is not considered empty under any circumstance, even if you put it on one line:
<script>var foo = 'bar';</script>
http://www.martinsmucker.com Michael Martin-Smucker

Is there any good workaround for this? I'm building a form, and I have a < p > to display submission errors, if any occur. By default, the p#errors is display:none, and I'd like to use jQuery to change it to display:block if the paragraph is :not(:empty).

Unfortunately, because my paragraph includes chunks of conditional php code, there's no way to put the < /p > on the same line.
Kevsta

If you've only got chunks of php you should be able to get it onto one line.

For example:
< p id=”error” >< ?
phpCode
? >< ?
phpCode
? >< /p >

As long as you don't leave any line breaks or spaces (between the php tags) :empty should work in all browsers on elements other than body.

If you really are unable to do that, change your php code to include a defining element (such as a hidden input for example <input id=”errorPresent” type=”hidden”>) when an error is present and get your jquery to check the existence of that errorPresent which will change the display of the parent element.

For example < p > will initially be set to display “none” and will have line breaks in it:
< p id=”error” >
line breaks because of php
< /p >
Your jquery won't change #error to display “block” because there's no “#errorPresent”.

< p id=”error” >
line breaks because of php
there's an error
< input type=”hidden” id=”errorPresent” >
< /p >
Your jquery will change #error to “block” because there's a “#errorPresent” element.

It's not great, but it works. Obviously you will need to choose an element which is W3 compliant with the rest of your code.

Hope that makes sense.
Kostal Zdenek

Try to use $.trim function and then test paragraph text.
Kostal Zdenek

Try to use $.trim function and then test paragraph text.

jQuery API