1

Como verificar qual p não possui valor de texto?

Tenho o seguinte código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>aaaaaaaaaa</p>
    <p>bbbbbbbbbb</p>
    <p></p>
    <p>aaaaaac</p>
    <p></p>
    <p>uuuuuuuuuuu</p>
</body>
</html>

Se a tag p não possuir texto, adicione display: none; na mesma.

1
  • Cara mas um <p></p> já é "display:none" por natureza. A tag P vazia não ocupa espaço na página...
    – hugocsl
    Commented 4/09/2018 às 22:29

3 Respostas 3

5

Sem usar jQuery, em JavaScript puro, o método querySelectorAll aceita o seletor :empty:

document.querySelectorAll('p:empty');

Desta forma irá restringir o laço apenas aos elementos <p> vazios, em vez de percorrer TODOS os <p>, dispensando a verificação com if:

const els = document.querySelectorAll('p:empty');
els.forEach(x=>{ x.style.display = "none" });

Só que existe um problema que é possível ocorrer: caso a tag <p> possua apenas espaços em branco (espaços também são caracteres) o seletor querySelectorAll('p:empty') não irá selecionar. Exemplos:

1º. <p></p>  -> esta tag está vazia
2º. <p>      -> esta tag NÃO está vazia,
    </p>        possui espaços porque está sendo fechada em uma nova linha

O seletor :empty do jQuery funciona diferente e irá considerar ambos os exemplos acima "vazios"; já o do querySelectorAll apenas o 1º.

No caso de usar jQuery, basta usar o seletor :empty com .hide():

$('p:empty').hide();

Caso haja a possibilidade mencionada acima, do <p> ser fechado numa outra linha, usando JavaScript puro, a resposta do Luiz Filipe é satisfatória usando o if, porém é necessário acrescentar a função .trim() para limpar os caracteres vazios:

const els = document.querySelectorAll('p');
els.forEach(el => {
  if (!el.textContent.trim()) {
    el.style.setProperty('display', 'none');
  }
});
2

Caso você não queira usar jQuery, pode fazer assim:

const els = document.querySelectorAll('p');

els.forEach(el => {
  if (! el.textContent) {
    el.style.setProperty('display', 'none');
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>aaaaaaaaaa</p>
    <p>bbbbbbbbbb</p>
    <p></p>
    <p>aaaaaac</p>
    <p></p>
    <p>uuuuuuuuuuu</p>
</body>
</html>

Com jQuery:

$('p:empty').css('display', 'none');
3
  • Seu JS não irá funcionar se o <p> e o fechamento </p> estiverem em linhas diferentes. Uma quebra de linha no código gera caractere, logo a tag não estará vazia.
    – Sam
    Commented 4/09/2018 às 22:43
  • Solução: adicione um .trim(): if (! el.textContent.trim()) {
    – Sam
    Commented 4/09/2018 às 22:45
  • @sam perfeito, obrigado. Commented 4/09/2018 às 22:50
1

Ficaria assim o trecho de código em JQuery:

$('p:empty').css('display', 'none');
2
  • 1
    $('p:empty').hide(); tem o mesmo efeito e eu acho até mais elegante :)
    – Sam
    Commented 4/09/2018 às 22:35
  • Verdade, mais uma opção que atende a pergunta e ainda se escreve menos código :P Commented 4/09/2018 às 22:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .