Utilisation d'une instruction if pour vérifier si un div est vide

J'essaie de supprimer un div spécifique si un div distinct est vide. Voici ce que j'utilise:

$(document).ready(function () {
    if ('#leftmenu:empty') {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({ 'right': '0', 'position': 'absolute' });
        $('#PageContent').css({ 'top': '30px', 'position': 'relative' });
    }
});

Je pense que c'est proche mais je ne peux pas comprendre comment écrire le code pour tester le #leftmenu est vide. Toute aide est appréciée!

Vous pouvez utiliser .is().

if( $('#leftmenu').is(':empty') ) {
    // ...

Ou vous pouvez simplement tester la lengthpropriété pour voir si une a été trouvée.

if( $('#leftmenu:empty').length ) {
    // ...

Gardez à l'esprit que vide signifie pas non plus d'espace blanc. S'il y a une chance qu'il y ait un espace blanc, vous pouvez utiliser $.trim()et vérifier la longueur du contenu.

if( !$.trim( $('#leftmenu').html() ).length ) {
    // ...

Cela dépend de ce que vous entendez par vide.

Pour vérifier s'il n'y a pas de texte (cela autorise les éléments enfants qui sont eux-mêmes vides):

if ($('#leftmenu').text() == '')

Pour vérifier s'il n'y a pas d'éléments enfants ou de texte:

if ($('#leftmenu').contents().length == 0)

Ou,

if ($('#leftmenu').html() == '')

Si vous voulez une démonstration rapide de la façon dont vous vérifiez les divs vides, je vous suggère d'essayer ce lien:

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/

Vous trouverez ci-dessous quelques exemples courts:

Utiliser CSS

Si votre div est vide sans rien, même pas d'espace blanc, vous pouvez utiliser CSS:

.someDiv:empty {
    display: none;
}

Malheureusement, il n'y a pas de sélecteur CSS qui sélectionne l'élément frère précédent. Il n'y a que pour l'élément frère suivant:x ~ y

.someDiv:empty ~ .anotherDiv {
    display: none;
}

Utilisation de jQuery

Vérification de la longueur du texte de l'élément avec la fonction text ()

if ( $('#leftmenu').text().length == 0 ) {
    // length of text is 0
}

Vérifiez si l'élément contient des balises enfants

if ( $('#leftmenu').children().length == 0 ) {
    // div has no other tags inside it
}

Vérifiez les éléments vides s'ils ont un espace blanc

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
    // white-space trimmed, div is empty
}

Vous pouvez étendre jQuery fonctionnalité comme ceci:

Étendre :

(function($){
    jQuery.fn.checkEmpty = function() {
       return !$.trim(this.html()).length;
    };
}(jQuery));

Utilisation :

<div id="selector"></div>

if($("#selector").checkEmpty()){
     console.log("Empty");
}else{
     console.log("Not Empty");
}

Essaye ça:

$(document).ready(function() {
    if ($('#leftmenu').html() === "") {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({'right' : '0', 'position' : 'absolute'});
        $('#PageContent').css({'top' : '30px', 'position' : 'relative'});
    }
});

Ce n'est pas le plus joli, mais ça devrait marcher. Il vérifie si le innerHTML (le contenu de #leftmenu) est une chaîne vide (c'est-à-dire qu'il n'y a rien à l'intérieur).

Dans mon cas, j'avais plusieurs éléments à cacher sur document.ready. C'est la fonction (filtre) qui a fonctionné pour moi jusqu'à présent:

$('[name="_invisibleIfEmpty"]').filter(function () {
    return $.trim($(this).html()).length == 0;
}).hide();

ou .remove () plutôt que .hide (), comme vous préférez.

FYI: Ceci, en particulier, est la solution que j'utilise pour masquer les cellules de tableau vides ennuyeuses dans SharePoint (en plus de cette condition "|| $ (this) .children (" menu "). Length".

if (typeof($('#container .prateleira')[0]) === 'undefined') {
    $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}

J'ai rencontré cela aujourd'hui et les réponses acceptées n'ont pas fonctionné pour moi. Voici comment je l'ai fait.

if( $('#div-id *').length === 0 ) {
    // your code here...
}

Ma solution vérifie s'il y a des éléments à l'intérieur du div donc il marquerait toujours le div vide s'il n'y a que du texte à l'intérieur.

vous pouvez également utiliser ceci:

    if (! $('#leftmenu').children().length > 0 ) {
         // do something : e.x : remove a specific div
    }

Je pense que cela fonctionnera pour vous!

if($('#leftmenu').val() == "") {
   // statement
}