En este capítulo, exploraremos cómo eliminar elementos del DOM.

Eliminación de elementos del DOM

Los elementos pueden eliminarse dinámicamente utilizando métodos como removeChild() y remove().

RemoveChild()

El método removeChild() elimina un nodo hijo específico del nodo padre. Es necesario acceder tanto al padre como al hijo que se desea eliminar.

Remove()

El método remove() es una forma más directa de eliminar un elemento sin necesidad de acceder explícitamente al nodo padre.

Ejemplo práctico: Gestor dinámico de lista de tareas

Construyamos una lista de tareas dinámica donde los usuarios puedan agregar nuevas tareas, insertar tareas en posiciones específicas y eliminar tareas según sea necesario.

Creación y adición de nuevas tareas:

• createElement() se utiliza para crear dinámicamente nuevos elementos <li> y botones <button> cuando el usuario introduce una nueva tarea;
• appendChild() agrega la tarea recién creada al final de la lista, permitiendo la adición continua de tareas a medida que el usuario interactúa con la lista.
  

Inserción de tareas en posiciones específicas: El botón "Insertar tarea al inicio" utiliza insertBefore() para agregar tareas al principio de la lista, mostrando cómo ubicar elementos en posiciones precisas dentro del elemento padre.

Adición de funcionalidad de eliminación:

• La función addRemoveFunctionality() asocia un listener de eventos al botón de eliminar de cada tarea, permitiendo que cada tarea sea eliminada al hacer clic en el botón;
• Esta función se reutiliza tanto para tareas existentes como para tareas recién creadas, asegurando un comportamiento consistente en todas las tareas.
  

Gestión de elementos preexistentes: Las tareas existentes también cuentan con funcionalidad de eliminación seleccionando todos los botones de eliminar actuales y asociando los listeners de eventos necesarios al cargar la página.