Aprende a darle vida a los botones de una to-do list usando delegación de eventos en JavaScript, una técnica que evita asignar listeners individuales y centraliza la lógica en el elemento padre. Vas a ver cómo editar y borrar tareas con addEventListener, classList.contains, confirm y prompt, ideal si estás construyendo tu primera app interactiva con DOM.

¿Qué es la delegación de eventos y por qué usarla aquí?

La delegación consiste en asignar un único addEventListener al elemento padre (en este caso taskList) y dejar que él identifique a qué hijo le diste clic. En vez de poner un evento por cada botón de borrar o editar, el padre escucha todo y decide qué hacer según la clase del botón presionado.

¿Qué es la delegación de eventos? Es una técnica donde el contenedor padre escucha los clics de sus hijos y, mediante event.target, identifica el elemento exacto para ejecutar la acción correspondiente.

La magia está en event.target, que te devuelve el elemento específico que recibió el clic. Desde ahí puedes leer su classList y validar si contiene la clase que te interesa.

¿Cómo capturar el clic en el botón correcto?

Lo primero es enganchar el listener al contenedor de tareas y leer el target. Si haces un console.log(event.target), vas a ver que cambia según el botón que presiones: el ícono de borrar, el de editar o el texto mismo.

El esqueleto se ve así:

javascript taskList.addEventListener('click', function(event) { if (event.target.classList.contains('delete-btn')) { deleteTask(event.target.parentElement); } else if (event.target.classList.contains('edit-btn')) { editTask(event.target.parentElement); } });

Fíjate en el detalle: pasas event.target.parentElement porque el clic ocurre en el botón, pero quieres manipular el <li> que lo contiene. Ese parentElement es la tarea completa.

¿Por qué validar con classList.contains?

Porque un mismo contenedor tiene varios hijos con funciones distintas. classList.contains('delete-btn') confirma que el clic fue en el botón de borrar y no en el de editar o en el texto. Así una sola función maneja todos los clics sin confundir comportamientos.

¿Cómo borrar una tarea con confirm?

La función deleteTask recibe el elemento de la tarea como parámetro y lanza un confirm, que es una alerta nativa con botones de aceptar y cancelar. Si la persona confirma, ejecutas .remove() sobre el elemento y desaparece del DOM.

javascript function deleteTask(taskItem) { if (confirm('¿Estás segura o seguro de borrar este elemento?')) { taskItem.remove(); } }

El método remove() elimina el nodo directamente del árbol del DOM, sin necesidad de tocar al padre. Es más limpio que parentNode.removeChild() y suficiente para una to-do list.

¿Qué hace el método remove en JavaScript? Quita el elemento HTML del DOM al instante. Lo llamas sobre el nodo que quieres eliminar y desaparece de la página sin recargar.

¿Cómo editar una tarea usando prompt?

A diferencia de confirm, el prompt te permite mostrar un input al usuario con un texto precargado. La idea es traer el contenido actual de la tarea, dejar que la persona lo modifique y reescribirlo si la respuesta no es nula.

El truco está en taskItem.firstChild.textContent, que apunta al primer nodo hijo del <li>, es decir, el texto de la tarea sin tocar los botones que vienen después.

javascript function editTask(taskItem) { const newTask = prompt('Edita la tarea:', taskItem.firstChild.textContent); if (newTask !== null) { taskItem.firstChild.textContent = newTask; } }

La validación newTask !== null es clave: si la persona presiona cancelar, prompt devuelve null y no quieres que tu tarea se borre por accidente. Solo cuando hay texto válido reescribes el contenido.

¿Cuál es la diferencia entre confirm, alert y prompt?

Son tres alertas nativas del navegador con propósitos distintos:

• alert: solo muestra un mensaje con botón de aceptar.
• confirm: muestra un mensaje con aceptar y cancelar, devuelve true o false.
• prompt: muestra un input editable, devuelve el texto escrito o null si se cancela.

Cada una resuelve un caso de uso diferente y en esta app las usas combinadas según la acción.

¿Qué conceptos clave dominaste en esta práctica?

Más allá del código, aquí hay varias habilidades que se quedan contigo para cualquier app interactiva:

• Delegación de eventos para escalar listeners sin saturar el DOM.
• Manipulación del DOM con firstChild, parentElement y remove().
• Validaciones condicionales con classList.contains y chequeos de null.
• APIs del navegador como confirm y prompt para interacciones rápidas sin construir modales.

Este patrón de un solo listener en el padre, validación por clase y funciones separadas para cada acción se repite en frameworks, librerías y apps reales. Si lo tienes claro aquí, lo vas a reconocer en cualquier proyecto.

¿Qué otra funcionalidad le agregarías a tu to-do list? Cuéntame en los comentarios cómo la implementaste.