0

Estou com um problema na seguinte função:

function limpaLista() {
    var lista = document.getElementById('resposta');
    var itens = document.getElementsByClassName('Repos');
    for (item of itens) {
        lista.removeChild(item);
    }
}

Ela deveria excluir totalmente uma lista de nomes, mas por algum motivo ela exclui metade da lista apenas a cada execução.

3
  • Coloca um console.log e verifica se a quantidade de itens e a lista realmente são os corretos, além disso, verifica se realmente todos os itens contém essa classe Repos. 2/08/2019 às 20:50
  • segue o resultado: ``` function limpaLista() { var lista = document.getElementById('resposta'); var itens = document.getElementsByClassName('Repos'); console.log(itens.length); console.log(itens); for (item of itens) { lista.removeChild(item); } console.log(itens.length); console.log(itens); } ``` 2/08/2019 às 21:06
  • Resolvido com a resposta abaixo, vlw 2/08/2019 às 21:11

1 Resposta 1

3

A lógica não está errada, mas tem uma armadilha nesse código.

O retorno do método getElementsByClassName é um HTMLCollection, uma lista "viva" que é atualizada conforme você adiciona ou remove elementos no DOM. Ao remover esses elementos do DOM, você está removendo da sua lista também, e é preciso ter cuidado ao se iterar sobre uma lista que está sendo reduzida.

Minha sugestão é transformar esse HTMLCollection num array comum antes de remover os itens, assim, apesar dos elementos serem removidos do DOM, ao menos a estrutura da sua lista se mantém integra durante a iteração:

function limpaLista() {
    var lista = document.getElementById('resposta');
    var itens = Array.from(document.getElementsByClassName('Repos'));
    for (item of itens) {
        lista.removeChild(item);
    }
}

Ou alternativamente faça um while para remover todos os itens enquanto eles existirem:

function limpaLista() {
    var lista = document.getElementById('resposta');
    var itens = document.getElementsByClassName('Repos');
    while (itens.length) {
        lista.removeChild(itens[0]);
    }
}

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 .