Usando uma instrução if para verificar se um div está vazio

Estou tentando remover um div específico se um div separado estiver vazio. Aqui está o que estou usando:

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

Acho que isso está perto, mas não consigo descobrir como escrever o código para testar o #leftmenu está vazio. Qualquer ajuda é apreciada!

Você pode usar .is().

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

Ou você pode apenas testar a lengthpropriedade para ver se alguma foi encontrada.

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

Lembre-se de que vazio também significa nenhum espaço em branco. Se houver uma chance de que haja um espaço em branco, você pode usar $.trim()e verificar o comprimento do conteúdo.

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

Depende do que você entende por vazio.

Para verificar se não há texto (isso permite os elementos filho que estão vazios):

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

Para verificar se não há nenhum elemento filho ou texto:

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

Ou,

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

Se você quiser uma demonstração rápida de como verificar se há divs vazios, sugiro que tente este link:

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

Abaixo você tem alguns exemplos curtos:

Usando CSS

Se seu div estiver vazio, sem nada, nem mesmo nenhum espaço em branco, você pode usar CSS:

.someDiv:empty {
    display: none;
}

Infelizmente, não há um seletor de CSS que selecione o elemento irmão anterior. Existe apenas para o próximo elemento irmão:x ~ y

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

Usando jQuery

Verificando o comprimento do texto do elemento com a função text ()

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

Verifique se o elemento possui tags filhas dentro

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

Verifique se há elementos vazios se eles tiverem espaço em branco

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

Você pode estender a funcionalidade do jQuery assim:

Ampliar :

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

Usar :

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

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

Experimente isto:

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

Não é o mais bonito, mas deve funcionar. Ele verifica se o innerHTML (o conteúdo de #leftmenu) é uma string vazia (ou seja, não há nada dentro dela).

No meu caso, eu tinha vários elementos para ocultar em document.ready. Esta é a função (filtro) que funcionou para mim até agora:

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

ou .remove () em vez de .hide (), o que você preferir.

Para sua informação: Esta, em particular, é a solução que estou usando para ocultar células de tabela vazias irritantes no SharePoint (além desta condição "|| $ (this) .children (" menu "). Length".

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

Eu encontrei isso hoje e as respostas aceitas não funcionaram para mim. Aqui está como eu fiz.

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

Minha solução verifica se há algum elemento dentro do div, de modo que ainda marcará o div vazio se houver apenas texto dentro dele.

você também pode usar isto:

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

Acho que vai funcionar para você!

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