Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Excluir todos os elementos com uma classe

Bom dia,

Queria entender como faço para excluir todos os elemtos com uma dada classe. Ex, estou conseguindo excluir dessa forma:

document.getElementsByClassName("minhaclasse")[0].remove();

Entretanto, ele exclui apenas o primeiro elemente, gostaria de excluir todos de que contém essa classe de uma vez.

Desde já, agradeço a parceria de sempre !

2 respostas
solução!

Oi Yago!

O comando document.getElementsByClassName("minhaclasse") retorna uma NodeList, ou seja, uma lista de todos os elementos com a classe CSS desejada. Precisamos então iterar pelos elementos desta lista e removê-los.

Podemos fazer isso utilizando um simples for

var lista = document.getElementsByClassName("minhaClasse");
for(var i = lista.length - 1; i >= 0; i--)
{
    lista[i].remove()
}

Uma observação importante: neste caso, é interessante começar a iterar pelo fim do array, pois ao remover um elemento, estamos realizando mudanças que podem gerar em um comportamento inesperado.

Caso utilizassemos um for do jeito tradicional (do 0 até o fim do array), o comportamento seria este:

Apenas o primeiro e o terceiro elemento seriam apagados. Isso acontece porque quando i = 0, o primeiro elemento é removido corretamente, mas após a remoção, note que o array mudou de ["olá", "tudo", "bem"] para ["tudo", "bem"].

Então com i = 1, o elemento removido é o "bem" e o for é finalizado.

Desta forma, não foi possível remover todos os elementos porque a ordem deles foi mudada durante a execução, introduzindo um comportamento que não era o esperado.

Porém quando utilizamos um for que vai do fim até o começo, a remoção dos elementos ocorre corretamente

Apesar do array estar recebendo modificações, note que quando removemos do final a posição inicial de cada elemento não é mudada.

Removendo o elemento final de ["olá", "tudo", "bem"], os índices (posições) de ["olá", "tudo"] não são alterados.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)

Obrigado meu querido, isso mesmo !