Hahaha, boa Reinaldo! A sensação de quando a gente consegue resolver um bug difícil é a melhor que tem, né? Parabéns pela persistência!
Sua lógica de guardar os elementos em um array para poder percorrer e "limpar" a seleção anterior funciona e resolve o problema perfeitamente. Chegar nessa solução por conta própria é o que realmente ensina.
Se me permite, vou te dar uma dica de uma abordagem alternativa que pode deixar o código um pouco mais enxuto e evita a necessidade de manter um array global. A ideia é, dentro do clique, primeiro procurar pelo item que já está ativo e remover a classe dele, para só depois adicionar a classe no item que foi clicado.
Ficaria algo assim:
li.onclick = () => {
// 1. Procura se já existe algum elemento com a classe ativa
const tarefaAtiva = document.querySelector('.app__section-task-list-item--active');
// 2. Se existir, remove a classe dele
if (tarefaAtiva) {
tarefaAtiva.classList.remove('app__section-task-list-item--active');
}
// 3. Adiciona a classe no elemento que foi clicado agora
tarefa_recebida.textContent = tarefa.descricao;
li.classList.add('app__section-task-list-item--active');
}
vantagem é que você não precisa guardar uma lista separada de todos os "li". Você simplesmente "pergunta" ao documento qual elemento está ativo no momento e o desativa.
Mas, de novo, o mais importante é que você venceu o desafio! Mandou bem demais!
