jQuery :empty Selector

What You’ll Learn

The :empty selector matches elements that have no children at all — no nested elements and no text nodes. Available since jQuery 1.0; it is the inverse of :parent and is standard CSS.

Introduction

Empty DOM nodes are common in tables, lists, and layout shells — a table cell with no data, a list item placeholder, or a widget container waiting for AJAX content. jQuery’s :empty pseudo-class finds those elements in one line.

Official jQuery documentation defines :empty as selecting all elements that have no children, including text nodes. That detail matters: a single space between opening and closing tags creates a text child, so the element is not empty. Prefix with a tag or scoped selector — $("td:empty") instead of bare $(":empty"), which implies $("*:empty").

Understanding the :empty Selector

Think of :empty as a structural filter:

• <td></td> → matches td:empty.
• <td>Hello</td> → no match (text child).
• <div><span></span></div> → no match (element child).
• <div> </div> → no match (whitespace text node).
• <img>, <input>, <br> — void elements with no children always match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":empty" )



// recommended — prefix with element type:

$( "td:empty" )

$( "div:empty" )

$( "#panel li:empty" )

$( "ul.menu li:empty" )

Parameters

• No arguments — filters by whether the element has any child nodes.

Return value

• A jQuery object containing every empty element in the search context.
• Empty collection when nothing matches.

Official jQuery API example

// Finds all td elements that are empty

$( "td:empty" )

  .text( "Was empty!" )

  .css( "background", "rgb(255,220,200)" );

Examples Gallery

Example 1 follows the official jQuery td:empty demo. Examples 2–5 compare with :parent, style empty containers, explain the whitespace trap, and remove empty list items. Use the Try-it links to run each snippet.

$( "td:empty" )

  .text( "Was empty!" )

  .css( "background", "rgb(255,220,200)" );



// Only truly empty cells change — cells with text stay as-is

Empty td cells → "Was empty!" + peach background

Cells with "TD #0", "TD #2", etc. → unchanged

console.log( ":empty →", $( ".box:empty" ).length );

console.log( ":parent →", $( ".box:parent" ).length );



// Totals should add up to total .box count

:empty → 2 (hollow boxes)

:parent → 2 (boxes with span or text)

$( "div.slot:empty" ).css({

  border: "2px dashed #94a3b8",

  minHeight: "48px"

});

Empty slots → dashed border

Slot with <p>Filled slot</p> → unchanged

console.log( "#a:empty →", $( "#a:empty" ).length ); // 1

console.log( "#b:empty →", $( "#b:empty" ).length ); // 0 — space is a text child



// Trim HTML source or use .html("") before testing :empty

#a:empty → 1 (truly empty)

#b:empty → 0 (contains space text node)

var n = $( "#tasks li:empty" ).length;

$( "#tasks li:empty" ).remove();

console.log( n + " empty item(s) removed" );

2 empty li removed

List shows "Buy milk" and "Walk dog" only

🚀 Common Use Cases

• Table formatting — fill or highlight td:empty cells in reports.
• Widget shells — style div:empty placeholders before AJAX loads content.
• List cleanup — remove li:empty after templating.
• Validation — count empty required containers before submit.
• Inverse queries — pair with :parent to split filled vs hollow nodes.
• CMS output — hide empty paragraphs or sections in generated HTML.

📝 Notes

• Available since jQuery 1.0 — standard CSS pseudo-class.
• Child nodes include text — whitespace between tags prevents a match.
• Inverse of :parent — official jQuery documentation.
• Prefer td:empty over bare $(":empty") (implies *:empty).
• Void elements (img, input, br) are always empty by definition.
• Re-query after .html() or .text() changes — emptiness can change dynamically.

💡 Best Practices