Borrar un post desde JavaScript no es solo asociar un clic a un botón y listo. Cuando trabajas con peticiones HTTP DELETE necesitas identificar el elemento correcto, optimizar el rendimiento y comunicarte bien con el servidor. Aquí entra el delegation pattern, una técnica que delega el evento al contenedor padre en lugar de a cada botón individual.
Esta lógica es clave si estás aprendiendo a consumir APIs REST con fetch, porque combina manejo del DOM, eventos y peticiones asíncronas en un mismo flujo.
Por qué usar el delegation pattern para borrar elementos
Cuando tienes muchas tarjetas renderizadas en pantalla, asignar un addEventListener a cada botón consume memoria y vuelve tu código más difícil de mantener. La solución es escuchar el clic una sola vez en el contenedor padre, y desde ahí detectar a qué elemento se le dio clic.
En el ejemplo, el padre es una section con id post-list, que contiene todas las tarjetas. A ese contenedor le agregas el evento de clic, y luego usas el objeto event para saber exactamente qué se presionó.
¿Qué es el delegation pattern? Es una técnica donde asignas un único evento al elemento padre en lugar de a cada hijo. El padre detecta el clic y, mediante event.target, identifica al hijo específico que lo recibió.
Este patrón mejora el performance y simplifica el manejo de elementos creados dinámicamente, como tarjetas que llegan desde una API. [01:05]
Cómo identificar el botón clickeado con event.target
Dentro del listener, el objeto event te da acceso a event.target, que es el elemento HTML exacto donde ocurrió el clic. Si imprimes un console.log(event) puedes navegar entre sus propiedades y confirmar qué nodo recibió la interacción.
Para filtrar solo los clics que importan, validas el tagName:
javascript
if (event.target.tagName === 'BUTTON') {
// ejecutar acción de borrado
}
Esta validación evita que cualquier clic dentro del contenedor active el borrado. Solo cuando el tagName coincide con BUTTON, sigues con la lógica.
Cómo obtener el id del post con closest
Cada tarjeta es un article con un id único. Para llegar a ese id desde el botón, usas el método closest, que sube por el árbol del DOM hasta encontrar el ancestro más cercano que coincida con el selector.
javascript
const postId = event.target.closest('article').id;
Esto te entrega el identificador exacto del post al que pertenece el botón, sin importar dónde esté ubicado dentro de la tarjeta. [03:10]
Cómo enviar la petición DELETE con fetch
Una vez que tienes el postId, llamas a tu función de fetch indicando el método DELETE y construyes la URL incluyendo el id del recurso a eliminar.
javascript
fetch(https://api.ejemplo.com/posts/${postId}, {
method: 'DELETE'
});
Las template literals con backticks permiten inyectar la variable postId directamente en la URL. Esta estructura sigue el estándar REST: el verbo HTTP indica la acción y la URL apunta al recurso específico.
¿Qué hace el método DELETE en una API REST? Le indica al servidor que elimine el recurso identificado en la URL. Normalmente no devuelve datos en el cuerpo de la respuesta, solo un código de estado como 200 si todo salió bien.
Leer la documentación de cada API es fundamental. Cada servicio define cómo espera recibir los parámetros, qué cabeceras requiere y qué respuesta devuelve. Saltarte ese paso suele provocar errores silenciosos.
Cómo validar que la petición DELETE funcionó
Si trabajas con una API fake como JSONPlaceholder, el cambio no se refleja en pantalla porque el servidor no persiste la modificación. Aun así, puedes confirmar que la petición salió correctamente desde las herramientas de desarrollo del navegador.
En la pestaña Network verás:
- El método utilizado, en este caso
DELETE.
- La URL completa con el id del post inyectado.
- El código de estado HTTP, idealmente
200.
- El tipo de petición registrada como
fetch.
En una API real, el siguiente paso sería volver a pedir la lista de posts para que el elemento eliminado deje de aparecer, ya que el cliente debe sincronizarse con el estado actual de la base de datos. [06:30]
Qué pasos seguir después de borrar un post en producción
- Confirmar que el servidor respondió con un estado exitoso.
- Actualizar la interfaz, ya sea removiendo la tarjeta del DOM o solicitando de nuevo la lista completa.
- Manejar errores con
try/catch o .catch() para avisar al usuario si algo falló.
Con esta combinación de delegation pattern, event.target, closest y fetch con método DELETE, ya tienes el flujo completo para eliminar recursos desde el frontend. ¿Te animas a aplicarlo en tu propio proyecto y compartir cómo resolviste la actualización de la lista después del borrado?
