Eliminar Posts con JavaScript y Delegación de Eventos

Clase 53 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿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:

Detectar el evento en el contenedor.
Verificar si el elemento objetivo (target) del evento es un botón.
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!

Robert Valdez Matos

student•

Me encantó el uso de event.target.closest para obtener el id mas cercano del button. Lo había hecho de otra forma un poco mas invasiva creando muchos Form dinamicos.

Excelente clase la verdad.

Miguel Jonathan Madrigal González

student•

Yo utilicé

event.target.parentElement.id

Alfonso Neil Jiménez

student•

sería mejor aclarar que para un método tan destructivo y peligroso como DELETE es necesario implementar un cuadro de diálogo o un modal (incluso un prompt), para advertir al usuario que confirme la acción, por buenas prácticas

Luis Humberto Osorio Quiceno

student•

Un saludo

Interesante hacer el curso donde se vea el proceso con APIs que se puedan manipular, para agregar, editar (PUT y PATCH) y eminiar registros.

Podemos para esto, hacer el curso de APIs con Laravel (por ejemplo) y tendríamos el ciclo base completado.

Sería genial

Kyb3r Cipher

student•

Si, amo laravel para hacer API de tipo CRUD.

Miguel Santa

student•

Cordial saludo, esta es otra forma que se puede resolver el Método Delete

function sendHTTPRequest(method, url, data = null) {
    const options = {
        method: method,
        headers: {
            "Content-Type": "application/json",
        },
    };

    if (data) {
        options.body = JSON.stringify(data);
    }

    return fetch(url, options).then((response) => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    });
}

async function fetchPost() {
    try {
        const responseData = await sendHTTPRequest(
            "GET",
            "https://jsonplaceholder.typicode.com/posts"
        );
        console.log(responseData);
        const listOfPosts = responseData;
        const listElement = document.getElementById("posts-container");

        // Limpiar el contenido anterior
        listElement.innerHTML = '';

        for (const post of listOfPosts) {
            const postContainer = document.createElement("article");
            postContainer.id = post.id;
            postContainer.classList.add("post-item");

            const title = document.createElement("h2");
            title.textContent = post.title;

            const body = document.createElement("p");
            body.textContent = post.body;

            const button = document.createElement("button");
            button.textContent = "DELETE Content";
            button.addEventListener("click", () => deletePost(post.id));

            postContainer.append(title);
            postContainer.append(body);
            postContainer.append(button);
            listElement.append(postContainer);
        }
    } catch (error) {
        console.error('There was an error fetching the posts:', error);
    }
}

function createNewPost(title, content) {
    const userId = Math.random();
    const post = {
        title: title,
        body: content,
        userId: userId,
    };
    sendHTTPRequest("POST", "https://jsonplaceholder.typicode.com/posts", post)
        .then(response => {
            console.log('Post created:', response);
            return fetchPost(); // Actualizar la lista de posts después de crear uno nuevo
        })
        .catch(error => {
            console.error('Error creating post:', error);
        });
}

function deletePost(postId) {
    sendHTTPRequest("DELETE", `https://jsonplaceholder.typicode.com/posts/${postId}`)
        .then(() => {
            console.log(`Post ${postId} deleted`);
            return fetchPost(); // Actualizar la lista de posts después de eliminar uno
        })
        .catch(error => {
            console.error(`Error deleting post ${postId}:`, error);
        });
}

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
    event.preventDefault();
    const title = event.currentTarget.querySelector("#title").value;
    const content = event.currentTarget.querySelector("#content").value;
    createNewPost(title, content);
});

const fetchButton = document.querySelector("#available-posts button");
fetchButton.addEventListener("click", fetchPost);

// No es necesario este event listener porque el botón de eliminación ya tiene su propio event listener
/*
const listElement = document.getElementById("posts-container");
listElement.addEventListener("click", (event) => {
    console.log(event);
    if (event.target.tagName === "BUTTON") {
        const postId = event.target.closest("article").id;
        console.log(postId);
    }
});
*/

Rodrigo Javier Ono Gimenez

student•

Excelente aporte, de esta forma aprovechamos directamente el botón que nos genera el getContent.

Estaría interesante saber si existe alguna ventaja o cuales serían las razones para hacer el evento de la forma explicada en el video o de la forma que propones

Matias Ezequiel Rivero

student•

La validación tiene que ser con "BUTTON" en Mayus o es indistinto?

Andrés Ortega

student•

Debe ser en mayúscula. Si haces un console.log() del evento "click" puedes encontrar que en target hay un atributo tagName sobre el cual se está haciendo la comparación para confirmar que el click fue en el botón y no en otra parte del post-item :)

Juan José Fonseca Buitrago

student•

tagName devuelve siempre el nombre en mayúsculas por diseño.
Es por eso que "BUTTON" funciona, pero "button" no.
Puedes normalizar la comparación con .toLowerCase() si quieres que sea insensible a mayúsculas/minúsculas

Calvin Rafael Bobadilla Fernandez

student•

RESUMEN:

Moises Hernandez

student•

Entonces el método closest busca al padre o contenedor de donde se encuentra e ignora los elementos hermanos woow

Juliette Villarroel

student•

Hi! Aquí nuevamente mis notas sobre cada parte del código, si algo se puede mejorar, díganme!

/* NUEVA PARTE */

postList.addEventListener("click", (event) => { //generamos otro evento click para postList
  console.log(event);
  if (event.target.tagName === "BUTTON") { //hacemos una validación, si el evento.target tiene el tag de "button", se ejecuta el bloque de código
    const postId = event.target.closest("article").id; //necesitamos extraer el id para saber qué post hay que eliminar, a su vez tomamos el article más cercano al botón y así eliminamos el mismo
    console.log(postId);
    sendHTTPRequest( //Llama a la función sendHTTPRequest, enviando una solicitud DELETE a la API, para eliminar el post con el postId correspondiente.
      "DELETE",
      `https://jsonplaceholder.typicode.com/posts/${postId}`
    );
  }
});

Alejandro Rosa

student•

Excelente curso maestro Diego, aprender con usted, es muy fácil

Ana Rotela Cabrera

student•

Maravillosa explicación del profesor Diego, el mejor de platzi sin dudas

Eduardo Enrique Morales Martínez

student•

Que curso debo ver para entender todo esto?