:empty - Sélectionner les éléments sans contenu

jQuery

Date de création 2026-10-26 Dernière modification 2026-10-26

Le sélecteur jQuery :empty choisit les éléments sans élément enfant ni texte. Limitez la portée avec $("#data td:empty") pour remplir des cellules vides. Un élément visuellement vide contenant des espaces ou une balise enfant ne correspond pas, contrairement à un élément contenant seulement un commentaire.

Qu’est-ce qu’un élément vide ?

Le contenu défini dans la documentation de :empty inclut les nœuds de texte. L’indentation et les sauts de ligne entre les balises peuvent donc compter. Les distinctions suivantes ont été vérifiées en exécutant cet exemple avec jQuery 4.0.0 et 3.7.1.

Contenu de l’élément	Correspond à :empty ?	Raison
Rien	Oui	Aucun élément enfant ni texte
Espaces, saut de ligne ou	Non	Les espaces constituent du texte
Un commentaire seulement	Oui	Les commentaires ne comptent pas ici
Un span vide ou un br	Non	Un élément enfant existe

La définition de CSS Selectors Level 3 exclut également les commentaires de cette décision. Un attribut title ou class ne rend pas l’élément non vide. À l’inverse, cacher un enfant avec display:none ne le retire pas de la structure. L’apparence seule ne suffit pas.

Exemple complet : remplir les cellules vides

Enregistrez tout le code en UTF-8 dans empty-demo.html et ouvrez-le dans un navigateur. Aucun paquet n’est à installer, mais une connexion est nécessaire pour charger jQuery depuis le réseau de diffusion de contenu (CDN). L’exemple fixe la distribution officielle à la version 4.0.0.

blank est vraiment vide, spaces contient trois espaces et comment seulement un commentaire. Le span de nested et le br de break sont des enfants même sans texte visible. Le résultat et les boutons sont placés hors du tableau sélectionné.

<!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>

Au départ, le résultat affiche ceci et les cellules blank et comment sont surlignées en jaune :

blank, comment | 2

Observer puis réinitialiser

Appuyez sur Fill empty cells. Les deux cellules correspondantes reçoivent N/A. Une nouvelle sélection donne none | 0.
Vérifiez spaces, nested et break. Leurs espaces ou enfants empêchent le remplissage.
Appuyez sur Reset. Le contenu de blank et comment est supprimé et les deux correspondent de nouveau. Seules ces cellules sont réinitialisées ; le commentaire initial lui-même n’est pas restauré.

.text("N/A") insère une chaîne à afficher. render retire d’abord la classe de surlignage de toutes les cellules, puis l’ajoute uniquement aux cellules actuellement vides. Cela évite de conserver une ancienne couleur sur une cellule remplie. Vérifiez à la fois l’opération et son affichage.

Limiter la portée et sélectionner de nouveau

Préférez $("#data td:empty") au sélecteur global $(":empty"). Vous évitez ainsi de sélectionner par accident des éléments vides ailleurs, notamment span ou br. Après l’ouverture ou Reset, exécutez ce code partiel dans la console des outils de développement pour voir le nombre et les identifiants :

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

2
blank, comment

Une sélection jQuery n’est pas une liste actualisée automatiquement lorsque le document change. Si vous conservez $empty puis remplissez les cellules, sa length reste 2. Relancez le sélecteur pour connaître les cellules vides maintenant. C’est pourquoi render crée une nouvelle sélection à chaque appel.

Distinguer .empty(), :parent et les valeurs saisies

:empty est une condition de sélection. La méthode .empty() supprime enfants et texte tout en conservant les éléments sélectionnés eux-mêmes, ce qui convient à Reset. La condition opposée, :parent, sélectionne les éléments contenant des enfants ou du texte. Elle est différente de la méthode .parent(), qui remonte au parent.

Un input peut correspondre à :empty même avec la valeur JB, car cette valeur n’est pas un contenu enfant. Pour savoir si l’utilisateur a saisi quelque chose, lisez la valeur actuelle avec .val() et comparez-la à une chaîne vide. Considérer les espaces seuls comme vides demande une règle distincte. Vide structurel et valeur de saisie vide ne sont pas le même test.

Si rien ne réagit, vérifiez le chargement de jQuery dans Network et les erreurs comme $ is not defined dans Console. Contrôlez aussi la correspondance des identifiants et les espaces éventuellement ajoutés entre les balises de la cellule supposée vide.

jQuery