Neste capítulo, vamos explorar como remover elementos do DOM.

Removendo Elementos do DOM

Elementos podem ser removidos dinamicamente utilizando métodos como removeChild() e remove().

RemoveChild()

O método removeChild() remove um nó filho especificado do nó pai. É necessário acessar tanto o pai quanto o filho para realizar a remoção.

Remove()

O método remove() é uma abordagem mais direta para remover um elemento sem a necessidade de acessar explicitamente o nó pai.

Exemplo Prático: Gerenciador Dinâmico de Lista de Tarefas

Construção de uma lista de tarefas dinâmica onde os usuários podem adicionar novas tarefas, inserir tarefas em posições específicas e remover tarefas conforme necessário.

Criação e Adição de Novas Tarefas:

• createElement() é utilizado para criar novos itens <li> e elementos <button> de forma dinâmica quando o usuário insere uma nova tarefa;
• appendChild() adiciona a tarefa recém-criada ao final da lista, permitindo a adição contínua de tarefas conforme o usuário interage com a lista.
  

Inserção de Tarefas em Posições Específicas: O botão "Inserir Tarefa no Topo" utiliza insertBefore() para adicionar tarefas ao início da lista, demonstrando como posicionar elementos em locais precisos dentro do elemento pai.

Adição de Funcionalidade de Remoção:

• A função addRemoveFunctionality() associa um ouvinte de evento ao botão de remoção de cada tarefa, permitindo que cada tarefa seja excluída ao clicar no botão;
• Esta função é reutilizada tanto para tarefas já existentes quanto para tarefas recém-criadas, garantindo comportamento consistente em todas as tarefas.
  

Manipulação de Elementos Pré-Existentes: Tarefas já existentes também recebem a funcionalidade de remoção ao selecionar todos os botões de remoção atuais e associar os ouvintes de evento necessários quando a página é carregada.