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! :)