Cuando trabajas con APIs y necesitas eliminar registros desde el frontend, no basta con agregar un evento de clic a cada botón. Existe un patrón mucho más eficiente llamado delegation pattern que mejora el rendimiento y simplifica el código. A continuación se explica paso a paso cómo implementar una petición HTTP delete utilizando fetch, identificando dinámicamente el ID del elemento que se desea borrar.
¿Qué es el delegation pattern y por qué mejora el performance?
En lugar de asignar un evento a cada botón de borrar dentro de las tarjetas, el delegation pattern consiste en agregar el evento al elemento padre que contiene todas las tarjetas [01:00]. El padre es quien detecta el clic y determina sobre qué hijo ocurrió la interacción.
Esto tiene dos ventajas principales:
- Mejor rendimiento: se registra un solo event listener en vez de uno por cada tarjeta.
- Compatibilidad dinámica: funciona incluso con elementos que se agregan al DOM después de cargar la página.
En el ejemplo, el padre es un <section> con el ID post-container, ya almacenado en una variable llamada postList [02:08]. El evento se agrega así:
javascript
postList.addEventListener('click', (event) => {
console.log(event);
});
Al inspeccionar event.target, se puede ver exactamente a qué elemento se le dio clic. Si fue un botón, el target apunta directamente a ese botón específico [02:55].
¿Cómo obtener el ID del elemento con closest?
Cada tarjeta es un <article> que contiene un ID único proveniente de la API [01:30]. Para extraer ese ID al momento del clic, se utiliza una validación con event.target.tagName y el método closest [03:30].
javascript
postList.addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const postId = event.target.closest('article').id;
console.log(postId);
}
});
¿Qué hace tagName en la validación?
La propiedad tagName devuelve el nombre de la etiqueta HTML en mayúsculas. Al comparar con 'BUTTON', nos aseguramos de que el código solo se ejecute cuando el usuario hace clic en un botón y no en cualquier otra parte de la tarjeta [03:15].
¿Cómo funciona el método closest?
El método closest busca hacia arriba en el árbol del DOM el ancestro más cercano que coincida con el selector indicado. En este caso, busca el <article> que envuelve al botón para acceder a su propiedad id [04:00]. Al hacer clic en el botón de borrar, el console.log muestra el ID correcto del post, por ejemplo 11.
¿Cómo enviar la petición DELETE con fetch?
Una vez obtenido el postId, se construye la petición HTTP con el método delete. La URL incluye el ID del post que se quiere eliminar, siguiendo la estructura que la API espera [05:10].
javascript
if (event.target.tagName === 'BUTTON') {
const postId = event.target.closest('article').id;
httpRequest('DELETE', https://jsonplaceholder.typicode.com/posts/${postId});
}
Se utilizan template literals (comillas invertidas) para interpolar la variable postId directamente en la URL [05:30]. Esto es fundamental porque la documentación de la API indica que el recurso a borrar se identifica agregando el ID al final de la ruta.
¿Cómo verificar que la petición fue exitosa?
Aunque visualmente la tarjeta no desaparezca (porque se trata de una API fake), la pestaña Network de las herramientas de desarrollo confirma los resultados [06:20]:
- El status code es
200, lo que indica éxito.
- El método registrado es
DELETE.
- La URL contiene el ID correcto del post, por ejemplo
/posts/8.
- El cuerpo de la respuesta está vacío porque el servidor no devuelve datos al borrar.
En una API real, después de confirmar el borrado, se haría un nuevo request tipo GET para actualizar la lista de posts sin el elemento eliminado [06:55].
Es importante leer siempre la documentación de cada API para entender qué estructura esperan los distintos verbos HTTP como GET, POST, PUT y DELETE [05:50]. Cada servicio puede tener convenciones diferentes y conocerlas evita errores innecesarios.
¿Has implementado el delegation pattern en tus proyectos? Comparte tu experiencia y cómo manejas las peticiones de borrado en el frontend.
