Solucionado
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 !
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 !