Cómo borrar posts con fetch y delegation pattern

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:15

Cómo borrar posts con fetch y delegation pattern

Curso de Fundamentos de JavaScript

Clase 53 de 55

Clase 53 / 55

Recursos

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?

Daniel Vergel

Hace 3 meses

!ELIMINAR UN POST ... JS CON FETCH API Y MÉTODO DELETE </> Elimina recursos en tu API sin recargar la página, de forma eficiente y segura. API REST 1 DELEGATION PATTERN & Escuchamos el clic en un contenedor JavaScript padre y gestionamos los botones hijos const container = document.getElementById('posts-container' ); dinámicamente. CONTENEDOR PADRE BOTONES HIJOS container. addEventListener('click', (event) => { #posts-container .btn-delete // La lógica del clic se maneja más abajo <article id="1"> <article id="2"> El patrón de delegación funciona incluso <article id="3"> con elementos agregados después. ... 2 EVENT.TARGET PARA DETECTAR 3 CLOSEST('ARTICLE').ID PARA CLIC EN BUTTON OBTENER EL POSTID Verificamos que el elemento clickeado sea Buscamos el <article> más cercano y realmente nuestro botón de eliminar. obtenemos su id (postid). JavaScript const target = event. target; BUTTON JavaScript const article = target. closest('article'); if ( !target.matches (' . btn-delete' )) { if (!article) return; return; // No es un botón de eliminar const postId = article. id; // "7" <article id="7"> postid se usará para construir la URL matches() asegura que el clic sea en el botón ... (no en un hijo como <span> o <svg>). dinámica de la petición DELETE. 4 PETICIÓN DELETE CON FETCH JavaScript async function deletePost (postId) Enviamos la petición DELETE a la API try { usando template literals para la URL. const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}", { method: 'DELETE', DELETE headers: { 'Content-Type' : 'application/json' JS API REST if (!response.ok) throw new Error( 'No se pudo eliminar el post'); /posts/${postId} return true; } catch (error) { </> Template literals console. error( 'Error al eliminar: ', error.message) ; Facilitan URL dinámicas: return false; ... /posts/${postId} 5 VERIFICACIÓN EN NETWORK Método Abre las DevTools (F12) y revisa tu petición. DELET Debe ser DELETE. Elements Console Sources Network 200 Estado All Fetch/XHR JS CSS Img Media Font Doc WS Other 200 OK indica que se eliminó correctamente. Name Method Status Type Initiator Time URL 17 DELETE 200 fetch script.js:45 120 ms Confirma que la URL incluye el ID del post. 6 BUENAS PRÁCTICAS ¡LISTO! ACTUALIZAR EL DOM RECARGAR LISTA (OPCIONAL) MANEJO DE ERRORES DOM Elimina el <article> del DOM Vuelve a obtener el listado Usa try/catch para manejar fallos para reflejar el cambio al instante. de posts para mantener el de red o del servidor. estado sincronizado. JavaScript JavaScript JavaScript article. remove ( ) ; try { /* petición */ } await loadPosts(); catch (error) { /* manejar */ } Elimina posts de tu API de forma moderna, Mejora la experiencia del usuario. Útil si hay paginación o filtros. Informa al usuario si algo falla. segura y sin recargar la página. RÁPIDO · SEGURO · EFICIENTE Fetch API + DELETE = Menos recargas, más control. <>

Comentarios (16)16 comentarios

Robert Valdez Matos

Hace 2 años

Miguel Jonathan Madrigal González

Alfonso Neil Jiménez Casallas

Luis Humberto Osorio Quiceno

Kyb3r Cipher

Moises Hernandez

Hace un año

Alfonso Galeano Conde

Hace 8 meses

Juliette Villarroel

Juan Miguel Jimenez

Hace 9 meses

Miguel Santa

Rodrigo Javier Ono Gimenez

Alejandro Rosa

Pedro Quiñones Paternina

Hace 6 meses

HERNANDO RAMIREZ

Matias Ezequiel Rivero

Andrés Ortega

Juan José Fonseca Buitrago

Calvin Rafael Bobadilla Fernandez

Eduardo Reyes

Hace 17 días

Roberto Carlos Moreira España

Ana Rotela Cabrera

Eduardo Enrique Morales Martínez

Eugenia Maldonado

Hace 10 meses

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Cómo borrar posts con fetch y delegation pattern