Comment masquer/supprimer un DIV vide

J'ai un serveur HTML côté de la sortie, je ne peut pas traiter à l'aide pur CSS, essentiellement la DIV parfois détient:

<div><span>Content</span></div>

ou

<div><p>Content</p></div>

ou

<div>Content</div>

ou

<div> </div>

Lorsque la DIV == <div> </div> je veux le supprimer.

Des idées?

OriginalL'auteur CLiown | 2009-09-21

  1. 21

    Encore mieux (en supposant que jQuery):

    $(document).ready(function() { $('div:empty').remove(); });

    EDIT: d'autres réponses sont bonnes, mais l'OP voulait supprimer l'item vide, de ne pas le cacher.

    +1 pour qu'il s'adapte plus ce que l'OP a demandé

    OriginalL'auteur Daniel Huckstep

  2. 40

    Vous pouvez le faire en utilisant uniquement CSS:

    div:empty { display: none }
    C'est la réponse correcte à faire un minimum pour réussir. Ne pas le feu jusqu'à jQuery CSS si seul est suffisant.
    La meilleure solution, mais il ne fonctionne pas avec IE8 et les anciennes versions d'IE quirksmode.org/css/contents.html
    masquer et supprimer ne sont pas les mêmes, supprimer complètement le retire du DOM, par conséquent, il ne peut même pas être validé
    La fin de la partie ici, mais ce serait en fait échouer pour l'exemple (<div> </div>) - :empty ne fonctionne que si il n'y a rien entre l'ouverture et la fermeture des balises, c'est à dire, <div></div>

    OriginalL'auteur Andrew

  3. 10

    Je pense que vous pouvez effectuer les opérations suivantes:

    $(function() {
  $("div:empty").hide();
});

    de jQuery vide pseudo-sélecteur est grande.

    C'est plutôt cool, je ne connaissais pas le vide pseudo-sélecteur

    OriginalL'auteur Allain Lalonde

  4. 6

    Voici un autre moyen facile...
    à l'aide du filtre()...

    $('div').filter(function() {

  return $.trim($(this).text()) === ''

}).remove()

    OriginalL'auteur Abbey

  5. 3

    Vous pouvez également utiliser les feuilles de style CSS uniquement pour résoudre ce problème, de mettre une table avec style="empty-cells:hide" autour du contenu, et la modification de la div à un td, comme ceci:

    Avant:

    <div>Content</div>

    Après:

    <table style="empty-cells:hide"><tr><td>Content</td></tr></table>

    empty-cells bat :empty par une version d'internet explorer (8.0 9.0 vs). Encore un peu utile (même 3-4 ans après cette réponse a été posté), mais compte tenu de la quantité de structure supplémentaire ajoutée et la quantité de temps qui est passé depuis IE 8, les futurs lecteurs peuvent voulez coller avec :empty soutenue par une solution d'activer Javascript.

    OriginalL'auteur Douglas Lise