Eliminar Posts con JavaScript y Delegación de Eventos

¿Cómo borrar elementos usando eventos en JavaScript?

¿Alguna vez te has preguntado cómo interactuar dinámicamente con los elementos de una página web, específicamente para eliminarlos de un servidor? Este artículo explora la implementación de una función de borrar usando JavaScript, que expande nuestras habilidades de desarrollo web al permitirnos eliminar elementos de manera eficiente.

¿Qué es el delegation pattern?

Antes de proceder a implementar la funcionalidad de borrado, es esencial comprender el delegation pattern. Este patrón nos permite escuchar eventos de los elementos hijos mediante la asignación de un único evento al elemento padre. En lugar de agregar un evento a cada botón individualmente, este enfoque mejora el rendimiento asignándole el evento al contenedor principal de los elementos.

¿Cómo identificar el elemento a borrar?

Para eliminar un elemento del servidor mediante una petición HTTP, primero necesitamos identificarlo de manera única. En nuestro HTML, cada elemento generalmente tiene un ID único. Al hacer clic en el botón de eliminar, debemos:

1. Detectar el evento en el contenedor.
2. Verificar si el elemento objetivo (target) del evento es un botón.
3. Obtener el ID del elemento padre (article) más cercano al botón que fue clicado.

Aquí es donde el método closest de JavaScript juega un papel crucial al encontrar el ancestro más cercano que coincide con el selector especificado:

document.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') { // Verifica si el click fue en un botón
    let postID = event.target.closest('article').id;
    console.log(postID);  // Imprime el ID del artículo
  }
});

¿Cómo enviar una solicitud DELETE al servidor?

Una vez tenemos el ID del elemento, podemos enviar una solicitud DELETE al servidor. Las solicitudes DELETE con frecuencia requieren que especifiquemos el recurso que deseamos borrar adjuntando su ID en la URL:

fetch(`http://tuservidor.com/posts/${postID}`, {
  method: 'DELETE'
})
.then(response => { 
  if (response.ok) {
    console.log('El post fue borrado');
  }
})
.catch(error => console.error('Error:', error));

¿Qué se debe considerar al trabajar con APIs?

Cuando trabajamos con cualquier API, es fundamental revisar su documentación. Cada API tiene requerimientos específicos sobre cómo se deben estructurar las solicitudes y qué tipo de datos esperan recibir. En nuestro caso, nos aseguramos de que la URL y el método de solicitud sean correctos para que el servidor procese la eliminación del recurso correctamente.

¿Funciona realmente?

Para verificar si nuestra implementación está funcionando, debemos revisar las herramientas de desarrollo del navegador. Observa las pestañas de Network para asegurar que el método DELETE fue enviado correctamente y recibe un status 200 en respuesta, lo cual indica éxito:

• Evalúa el método que muestra DELETE.
• Revisa el endpoint de la URL utilizada.
• Confirma que el servidor recibió correctamente la operación.

Al aplicar estos conocimientos, no solo mejoramos la experiencia del usuario en la web, sino que también potenciamos nuestras habilidades en desarrollos complejos. A medida que internalices estos conceptos, estarás cada vez más cerca de dominar el desarrollo web interactivo y eficiente. ¡Sigue explorando y perfeccionando tus habilidades!