[Dúvida] Desafio 1 - Índice do nome clicado

Oi, Caio, tudo bem?

Quando você clica em um nome na lista de amigos, o JavaScript precisa identificar qual item foi clicado para poder removê-lo. Normalmente, isso é feito associando um evento de clique a cada item da lista. A variável i dentro do for é usada para iterar sobre os elementos da lista e pode ser aproveitada para identificar o índice do item clicado.

Aqui está um exemplo prático de como isso pode ser feito:

let amigos = ["Alice", "Bob", "Carlos", "Diana"];

// Função para atualizar a lista na interface
function atualizarLista() {
    let lista = document.getElementById("listaAmigos");
    lista.innerHTML = ""; // Limpa a lista atual

    for (let i = 0; i < amigos.length; i++) {
        let item = document.createElement("li");
        item.textContent = amigos[i];
        item.setAttribute("data-index", i); // Adiciona um atributo data-index com o valor de i
        item.addEventListener("click", removerAmigo); // Adiciona o evento de clique
        lista.appendChild(item);
    }
}

// Função para remover um amigo da lista
function removerAmigo(event) {
    let index = event.target.getAttribute("data-index"); // Pega o índice do amigo clicado
    amigos.splice(index, 1); // Remove o amigo da lista
    atualizarLista(); // Atualiza a visualização da lista
}

// Inicializa a lista na interface
atualizarLista();

Nesse exemplo, ao criar cada item da lista (<li>), adicionamos um atributo data-index que armazena o valor de i. Quando o item é clicado, a função removerAmigo é chamada e usa esse índice para remover o amigo correto da lista amigos. Após remover o amigo, a função atualizarLista é chamada novamente para atualizar a visualização da lista na interface.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!