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');
}
});
<p></p>
já é "display:none" por natureza. A tag P vazia não ocupa espaço na página...