jQuery / Selector / :empty - Seleccionar elementos sin contenido

El selector :empty de jQuery selecciona elementos sin elementos hijos ni texto. Limita el alcance con $("#data td:empty") para rellenar celdas vacías. Un elemento que parece vacío pero contiene espacios o etiquetas hijas no coincide; uno con solo un comentario sí.

Qué se considera vacío

El contenido descrito en la documentación de :empty incluye nodos de texto. Por eso, la sangría y los saltos de línea entre etiquetas pueden importar. Estas diferencias se comprobaron ejecutando el ejemplo con jQuery 4.0.0 y 3.7.1.

La definición de CSS Selectors Level 3 también excluye los comentarios de esta decisión. Un atributo title o class no hace que el elemento tenga contenido. En cambio, ocultar un hijo con display:none no lo elimina de la estructura. No juzgues solo por la apariencia.

Ejemplo completo: rellenar celdas vacías

Guarda todo el código en UTF-8 como empty-demo.html y ábrelo en un navegador. No necesitas instalar paquetes, pero sí conexión para cargar jQuery desde la red de distribución de contenido (CDN). El ejemplo fija la distribución oficial en jQuery 4.0.0.

blank está realmente vacía, spaces contiene tres espacios y comment solo un comentario. El span de nested y el br de break son hijos aunque no muestren texto. El resultado y los controles están fuera de la tabla seleccionada.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Empty table cells</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    table { border-collapse: collapse; width: 100%; max-width: 600px; }
    td { border: 1px solid #aaa; padding: 16px; min-width: 80px; }
    .is-empty { background: #fff0b3; }
    button { margin: 16px 8px 0 0; padding: 8px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Empty table cells</h1>
  <table id="data">
    <tr><td id="blank"></td><td id="spaces">   </td></tr>
    <tr><td id="comment"><!-- note --></td><td id="text">Hello</td></tr>
    <tr><td id="nested"><span></span></td><td id="break"><br></td></tr>
  </table>
  <button type="button" id="fill">Fill empty cells</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function render() {
        const $empty = $("#data td:empty");
        $("#data td").removeClass("is-empty");
        $empty.addClass("is-empty");
        const ids = $empty.map((_, cell) => cell.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$empty.length}`);
      }
      $("#fill").on("click", function () {
        $("#data td:empty").text("N/A");
        render();
      });
      $("#reset").on("click", function () {
        $("#blank, #comment").empty();
        render();
      });
      render();
    });
  </script>
</body>
</html>

Al abrirlo, el resultado es el siguiente y las celdas blank y comment aparecen resaltadas en amarillo:

blank, comment | 2

Observar y restablecer el ejemplo

1. Pulsa Fill empty cells. Las dos celdas seleccionadas reciben N/A. Al seleccionar de nuevo, el resultado es none | 0.
2. Comprueba spaces, nested y break. Sus espacios o hijos impiden que se rellenen.
3. Pulsa Reset. Se vacían blank y comment y vuelven a coincidir. Solo se restablecen esas dos celdas; no se restaura el comentario original.

.text("N/A") inserta una cadena visible. render elimina primero la clase de resaltado de todas las celdas y la añade únicamente a las vacías actuales. Así no queda una marca antigua en las recién rellenadas. Revisa tanto la operación como su estado visual.

Limitar la selección y repetirla tras cambios

Prefiere $("#data td:empty") a $(":empty") para todo el documento. Esto evita seleccionar elementos vacíos fuera de la tabla, incluidos span y br. Al abrir el ejemplo o después de Reset, ejecuta este código parcial en la consola de desarrollo para consultar cantidad e identificadores:

const $empty = $("#data td:empty");
console.log($empty.length);
console.log($empty.map((_, cell) => cell.id).get().join(", "));

2
blank, comment

Una selección jQuery no es una lista viva que se actualice al cambiar el documento. Si guardas $empty y rellenas las celdas, su length sigue siendo 2. Ejecuta otra vez el selector para contar las celdas vacías actuales. Por eso render crea una selección nueva en cada llamada.

Distinguir .empty(), :parent y los valores de entrada

:empty es una condición de selección. El método .empty() elimina hijos y texto, conservando los elementos seleccionados; por eso sirve para Reset. La condición contraria, :parent, selecciona elementos con hijos o texto. No es el método .parent(), que accede al elemento padre.

Un input puede coincidir con :empty aunque tenga el valor JB, porque su valor no es contenido hijo. Para comprobar una entrada, lee el valor actual con .val() y compáralo con una cadena vacía. Decidir si una entrada de solo espacios cuenta como vacía es otra política. La estructura vacía y el valor vacío necesitan comprobaciones distintas.

Si no hay reacción, revisa en Network que jQuery se haya cargado y busca errores como $ is not defined en Console. Comprueba también los identificadores y si al editar se añadieron espacios entre las etiquetas de una celda supuestamente vacía.