Utilizzo di un'istruzione if per verificare se un div è vuoto

Sto cercando di rimuovere un div specifico se un div separato è vuoto. Ecco cosa sto usando:

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

Penso che questo sia vicino ma non riesco a capire come scrivere il codice per testare #leftmenu è vuoto. Qualsiasi aiuto è apprezzato!

Puoi usare .is().

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

Oppure potresti semplicemente testare la lengthproprietà per vedere se ne è stata trovata una.

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

Tieni presente che vuoto significa anche nessuno spazio bianco. Se c'è la possibilità che ci sia uno spazio bianco, puoi usare $.trim()e controllare la lunghezza del contenuto.

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

Dipende da cosa intendi per vuoto.

Per verificare se non c'è testo (questo consente elementi figli che sono vuoti stessi):

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

Per verificare se non sono presenti elementi figlio o testo:

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

O,

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

Se desideri una rapida demo su come verificare la presenza di div vuoti, ti suggerisco di provare questo link:

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

Di seguito sono riportati alcuni brevi esempi:

Utilizzando CSS

Se il tuo div è vuoto senza nulla, nemmeno spazi bianchi, puoi usare CSS:

.someDiv:empty {
    display: none;
}

Purtroppo non esiste un selettore CSS che seleziona l'elemento di pari livello precedente. C'è solo per il prossimo elemento di pari livello:x ~ y

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

Utilizzando jQuery

Controllo della lunghezza del testo dell'elemento con la funzione text ()

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

Controlla se l'elemento ha dei tag figli all'interno

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

Verificare la presenza di elementi vuoti se hanno spazi bianchi

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

Puoi estendere jQuery funzionalità di questo modo:

Estendi:

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

Uso :

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

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

Prova questo:

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

Non è il più carino, ma dovrebbe funzionare. Controlla se il innerHTML (il contenuto di #leftmenu) è una stringa vuota (cioè non c'è niente al suo interno).

Nel mio caso avevo più elementi da nascondere su document.ready. Questa è la funzione (filtro) che ha funzionato finora:

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

o .remove () invece di .hide (), come preferisci.

FYI: Questa, in particolare, è la soluzione che sto usando per nascondere fastidiose celle di tabelle vuote in SharePoint (oltre a questa condizione "|| $ (this) .children (" menu "). Length".

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

L'ho riscontrato oggi e le risposte accettate non hanno funzionato per me. Ecco come l'ho fatto.

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

La mia soluzione controlla se ci sono elementi all'interno del div in modo da contrassegnare ancora il div vuoto se al suo interno c'è solo testo.

anche tu puoi usare questo:

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

Penso che funzionerà per te!

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