[Duvida] Não consegui realizar o desafio 1 | Lógica de programação: praticando com desafios

Oi Enzo!

Entendi que você está com dificuldades para realizar o desafio 1 do projeto Amigo Secreto. Vou te ajudar a entender melhor a resolução do instrutor.

Desafio 1: Remover um amigo da lista e atualizar a visualização

Vamos dividir esse desafio em passos menores para facilitar a compreensão:

Criar a funcionalidade de remoção:
- Primeiro, você precisa adicionar um evento de clique em cada amigo da lista. Quando o usuário clicar em um amigo, ele será removido.
- Suponha que você tenha uma lista de amigos renderizada em HTML, cada amigo pode ser um item <li> dentro de uma <ul>.
```
<ul id="lista-amigos">
  <li>Amigo 1 <button class="remover">Remover</button></li>
  <li>Amigo 2 <button class="remover">Remover</button></li>
  <li>Amigo 3 <button class="remover">Remover</button></li>
</ul>
```
Adicionar o evento de clique:
- No seu script JavaScript, você pode adicionar um evento de clique a todos os botões de remover. Quando o botão for clicado, o item correspondente será removido da lista.
```
document.querySelectorAll('.remover').forEach(button => {
  button.addEventListener('click', function() {
    const item = this.parentElement;
    item.remove();
  });
});
```
Atualizar a visualização:
- A remoção do item da lista já atualiza a visualização automaticamente, pois estamos manipulando diretamente o DOM. Quando um item é removido, ele desaparece da tela.

Exemplo Completo

Aqui está um exemplo completo para você visualizar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amigo Secreto</title>
</head>
<body>
  <ul id="lista-amigos">
    <li>Amigo 1 <button class="remover">Remover</button></li>
    <li>Amigo 2 <button class="remover">Remover</button></li>
    <li>Amigo 3 <button class="remover">Remover</button></li>
  </ul>

  <script>
    document.querySelectorAll('.remover').forEach(button => {
      button.addEventListener('click', function() {
        const item = this.parentElement;
        item.remove();
      });
    });
  </script>
</body>
</html>

Espero que esses passos tenham esclarecido a resolução do desafio. Bons estudos!

Mergulhe em programação

Desafio 1: Remover um amigo da lista e atualizar a visualização

Exemplo Completo