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

Clase 54 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿De dónde proviene el ID utilizado para las solicitudes?

Si alguna vez te has preguntado cómo tu aplicación gestiona la eliminación de artículos, el misterio del ID es crucial para entender el proceso. En aplicaciones web, el ID que se utiliza para enviar solicitudes de eliminación de artículos se obtiene típicamente del servidor cuando se realiza una solicitud GET. Este ID se incluye en la respuesta del servidor y se integra en el DOM mediante JavaScript. Vamos a desglosar este proceso y clarificar cómo se maneja.

¿Cómo se integra el ID en el DOM?

Cuando el servidor responde a una solicitud GET, proporciona un conjunto de datos que incluye, entre otros, los IDs únicos de cada artículo. Al recibir esta respuesta, se genera dinámicamente un elemento en el DOM, normalmente una etiqueta de artículo (<article>) para cada post. Este proceso se realiza mediante un bucle en JavaScript que recorre los datos de respuesta y crea un contenedor de post (PostContainer). El ID recibido de la respuesta del servidor se asigna a este contenedor como atributo ID.

Esencialmente, el código ejecuta algo como esto:

posts.forEach(post => {
  const postContainer = document.createElement('article');
  postContainer.id = post.id; // Asignar el ID del post
  // ... código adicional para manejar el contenido
});

Aquí, post.id es el ID proporcionado por el servidor, mientras que postContainer.id asegura que el atributo ID del elemento HTML coincida con este ID del servidor.

¿Cómo se utiliza el ID para eliminar un artículo?

La magia de eliminar un artículo reside en la identificación correcta de cuál debe ser eliminado. Una vez que los elementos del DOM contienen los IDs como atributos, estos se pueden utilizar para enviar solicitudes de eliminación precisas al servidor.

Cuando un usuario decide borrar un artículo, el ID almacenado en el contenedor del post se recupera y se utiliza para informar al servidor cuál es el artículo deseado para eliminar. Esto se hace a menudo utilizando una función de solicitud DELETE en JavaScript que envía una petición al servidor junto con el ID del artículo.

Por ejemplo, podrías usar:

function deletePost(postID) {
  fetch(`https://api.example.com/posts/${postID}`, {
    method: 'DELETE'
  })
  .then(response => response.json())
  .then(data => {
    console.log('Post eliminado:', data);
    // Actualizar el DOM o manejar respuestas de éxito
  })
  .catch(error => {
    console.error('Error al eliminar el post:', error);
  });
}

¿Por qué es importante gestionar correctamente los IDs en una aplicación?

La correcta gestión de los IDs es crucial no solo para mantener la integridad de la aplicación sino también para evitar la eliminación o modificación accidental de datos incorrectos. Al adherirse a prácticas rigurosas en el manejo de IDs:

Precisión: Se asegura que solo el contenido deseado sea modificado o eliminado.
Seguridad: Minimiza el riesgo de alteraciones no autorizadas o pérdidas de datos.
Eficiencia: Al automatizar y optimizar las operaciones, se mejora la experiencia del usuario y se reduce la carga en el servidor.

Esperamos que este desglose sobre el proceso de gestión de IDs en aplicaciones web te haya ayudado a entender mejor cómo se integran los IDs y su importancia en la funcionalidad del sistema. Estos principios no solo son fundamentales para el desarrollo actual, sino que también preparan el camino para soluciones más robustas en el futuro. ¡Continúa explorando y perfeccionando tus habilidades en este ámbito!

Juliana Rios

student•

Excelenete curso, en algunas aprtes si me estaría bueno una explicación mejor, con respecto a cosas que pasana en el código. Aun así me encantoooo.

ajajajaj a seguir aprendiendo<3

Andrés Castillo

student•

Literal jaja, concuerdo. Creo que hay información muy valiosa, un poco desorganizada y de a momentos difusa, pero me llevo mucho de este curso.

Calvin Rafael Bobadilla Fernandez

student•

Usualmente, el navegador asigna un valor unico a la propiedad ID cuando un elemento se crea dinamicamente en javascript (como un createElement por ejemplo)

Ademas, el api, se ve explicitamente el id de cada post y ya directamente el codigo le estamos pidiendo que el id del elemento, sea igual al id que venia ese mismo elemento en el API.

Ana Rotela Cabrera

student•

Aprendi muchísimo con el maestro Diego De Granda. El mejor de todo platzi honestamente

Kyb3r Cipher

student•

Aqui mi solucion use bootstrap y cambie el codigo por que lo hice yo:

html:

<header>
    <title>Project Posts</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</header>

<body class="mt-5 container">
    <h2>Project Posts</h2>

    <form id="post-form" class="w-25 p-2 border border-3 rounded">
        <div>
            <label for="postTitle" class="form-label">Title</label>
            <input type="text" id="postTitle" class="form-control">
        </div>
        <div class="m-3 mx-0">
            <label for="postBody" class="form-label">Body</label>
            <input type="text" id="postBody" class="form-control">
        </div>
        
        <button class="btn btn-primary">POST Content</button>
        <button id="buttonGetPosts" class="btn btn-primary">GET Content</button>
    </form>

    <div id="post-container">
        
    </div>

    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="project-posts.js"></script>
</body>
```js:

```js
const url = "https://jsonplaceholder.typicode.com";

const buttonGetPosts = document.getElementById("buttonGetPosts");
const postContainer = document.getElementById("post-container");
const postForm = document.getElementById("post-form");

async function sendHTTPRequest(method, url, data) {
    const reponse = await fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json", }
    });
    return await reponse.json();
}

// Form buttons events
postForm.addEventListener("submit", (event) => {
    event.preventDefault(); // Remove default action redirect form.

    const title = event.currentTarget.querySelector("#postTitle").value;
    const content = event.currentTarget.querySelector("#postBody").value;
    createPost(title, content); // (simulate, API not support method).
});
buttonGetPosts.addEventListener("click", getPosts);

// Articles delete button (simulate API not support method).
postContainer.addEventListener("click", (event) => {
    if (event.target.tagName === "BUTTON") {
        const postId = event.target.closest("article").id;
        console.log(postId);
        sendHTTPRequest("DELETE", url + "/posts/" + postId);
    }
});

async function createPost(title, content) {
    const userId = Math.random();
    const post = {
        title: title,
        body: content,
        userId: userId,
    };
  
    sendHTTPRequest("POST", url + "/posts", post);
}

async function getPosts() {
    const responseData = await sendHTTPRequest("GET", url + "/posts");
    console.log(responseData);

    for (const post of responseData) {
        const newPost = document.createElement("article");
        newPost.id = post.id;
        newPost.classList.add("card", "mt-3");
        newPost.style.width = "18rem";

        const newPostBody = document.createElement("div");
        newPostBody.classList.add("card-body");

        const newPostTitle = document.createElement("h5");
        newPostTitle.classList.add("card-title");
        newPostTitle.textContent = post.title;
        newPostBody.append(newPostTitle);

        const newPostSubtitle = document.createElement("h6");
        newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary");
        newPostSubtitle.textContent = "#" + post.id;
        newPostBody.append(newPostSubtitle);

        const newPostText = document.createElement("p");
        newPostText.classList.add("card-text");
        newPostText.textContent = post.body;
        newPostBody.append(newPostText);

        const newPostButtonDelete = document.createElement("button");
        newPostButtonDelete.classList.add("btn", "btn-danger", "w-100");
        newPostButtonDelete.innerText = "DELETE";
        newPostBody.append(newPostButtonDelete);
        
        newPost.append(newPostBody);
        postContainer.append(newPost);
    }
}

Matias Ezequiel Rivero

student•

Lo que paso con este curso es que inicialmente fue "JavaScript desde Cero" (si no estoy mal) que era de 80 clases aprox. Luego lo cortaron/dividieron en dos cursos, creería que es este "Fundamentos de JS" y "Manipulación del DOM" es por esa edición que hay clases que repiten contenido, o terminan de forma repentina. De igual manera a mi entender el orden de aprendizaje es HTML -> CSS -> JS

Juliette Villarroel

student•

Claro! Igualmente no veo problema en ver manipulación del DOM después de este curso, al final ambos de complementan<3

Ulises Sánchez Muñoz

student•

Veo que muchos ya ni comentaron, jaja. Pues, a mi parecer, estuvo muy sólido el curso. Hubiese preferido un poquito más de carne en los últimos temas, pero estoy muy satisfecho de repasar JavaScript (cabe señalar que no soy nuevo en el tema, por eso es un poco objetivo mi comentario). Ya buscaré más cursos de Diego, que sí es verdad que en algunas clases como que le faltó explicar un poco más. Por mi parte, estuvo bueno el curso. P.D.: Igual, le hubieran dejado más temas a la otra chava, xd.

Jeferson Pinilla

student•

En la clase sobre la importancia del ID en el método DELETE, se abordó cómo el ID, obtenido de la respuesta de una solicitud GET, es esencial para identificar el artículo que se desea eliminar. Al generar elementos en el DOM, se asigna el ID correspondiente a cada artículo, permitiendo que al realizar la eliminación, el servidor reconozca cuál elemento debe ser borrado. Este proceso es fundamental en la manipulación de datos en aplicaciones web y se basa en la interacción entre el cliente y el servidor mediante JavaScript.

Kyb3r Cipher

student•

Ya casi se acaba...

Kyb3r Cipher

student•

Siento que esta classe podria ser una con la pasada y una sola expliacion ademas de usar una api real de ustedes

Moises Hernandez

student•

Yo entendi esto: lo que entendí en la clase pasada es que se le agrego un evento llamado "click" al contenedor padre que es un elemento "<section>" que contiene un atributo "id" con el valor "#posts-container" esto para evitar agregarle un evento a cada "<article>" y así mejorar el performans de la pagina lo que nos ahorra mucho si tuviéramos miles de datos.

Ahora para reconocer cual es el id se hizo una condición "if" el cual solo se ejecutara si detecta que el evento “click” se realizo dentro de un elemento un elemento “<button>” entonces mediante el uso del metodo "closest" nos ayuda a identificar cual es su contendedor padre de donde se realizo el evento, en este caso el “botón eliminar” para eliminar tiene dos elementos hermanos respecto al mismo contenedor PADRE un “<h2>” y un <p> los cuales son ignora por el metodo “closest” y busca al padre mas cercano o directo que es “<article>”, cada <article> tiene un atributo id único del cual toma su valor para enviarlo al post delete

David Elias Gatica Morales

student•

Si me envia un 200 al eliminar pero no se refleja nada en DOM, supongo que es el API

David Elias Gatica Morales

student•

Ok primer comentario, creo

Héctor Galindo

student•

Para el método DELETE implementé la siguiente solución:

postList.addEventListener("click", (event) => {
	console.log(event.target.parentElement.id)
	event.target.parentElement.remove()
	const postId = event.target.parentElement.id;
	sendHTTPRequest("DELETE", `https://jsonplaceholder.typicode.com/posts/${postId}`)

})

Kyb3r Cipher

student•

Aqui mi solucion use bootstrap y cambie el codigo por que lo hice yo:

html:<header> <title>Project Posts</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"></header> <body class="mt-5 container"> <h2>Project Posts</h2> <form id="post-form" class="w-25 p-2 border border-3 rounded"> <div> <label for="postTitle" class="form-label">Title</label> <input type="text" id="postTitle" class="form-control"> </div> <div class="m-3 mx-0"> <label for="postBody" class="form-label">Body</label> <input type="text" id="postBody" class="form-control"> </div> <button class="btn btn-primary">POST Content</button> <button id="buttonGetPosts" class="btn btn-primary">GET Content</button> </form> <div id="post-container"> </div>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="project-posts.js"></script></body>

<header>
    <title>Project Posts</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</header>

<body class="mt-5 container">
    <h2>Project Posts</h2>

    <form id="post-form" class="w-25 p-2 border border-3 rounded">
        <div>
            <label for="postTitle" class="form-label">Title</label>
            <input type="text" id="postTitle" class="form-control">
        </div>
        <div class="m-3 mx-0">
            <label for="postBody" class="form-label">Body</label>
            <input type="text" id="postBody" class="form-control">
        </div>
        
        <button class="btn btn-primary">POST Content</button>
        <button id="buttonGetPosts" class="btn btn-primary">GET Content</button>
    </form>

    <div id="post-container">
        
    </div>

    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="project-posts.js"></script>
</body>
```js:

```js
const url = "https://jsonplaceholder.typicode.com";

const buttonGetPosts = document.getElementById("buttonGetPosts");
const postContainer = document.getElementById("post-container");
const postForm = document.getElementById("post-form");

async function sendHTTPRequest(method, url, data) {
    const reponse = await fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json", }
    });
    return await reponse.json();
}

// Form buttons events
postForm.addEventListener("submit", (event) => {
    event.preventDefault(); // Remove default action redirect form.

    const title = event.currentTarget.querySelector("#postTitle").value;
    const content = event.currentTarget.querySelector("#postBody").value;
    createPost(title, content); // (simulate, API not support method).
});
buttonGetPosts.addEventListener("click", getPosts);

// Articles delete button (simulate API not support method).
postContainer.addEventListener("click", (event) => {
    if (event.target.tagName === "BUTTON") {
        const postId = event.target.closest("article").id;
        console.log(postId);
        sendHTTPRequest("DELETE", url + "/posts/" + postId);
    }
});

async function createPost(title, content) {
    const userId = Math.random();
    const post = {
        title: title,
        body: content,
        userId: userId,
    };
  
    sendHTTPRequest("POST", url + "/posts", post);
}

async function getPosts() {
    const responseData = await sendHTTPRequest("GET", url + "/posts");
    console.log(responseData);

    for (const post of responseData) {
        const newPost = document.createElement("article");
        newPost.id = post.id;
        newPost.classList.add("card", "mt-3");
        newPost.style.width = "18rem";

        const newPostBody = document.createElement("div");
        newPostBody.classList.add("card-body");

        const newPostTitle = document.createElement("h5");
        newPostTitle.classList.add("card-title");
        newPostTitle.textContent = post.title;
        newPostBody.append(newPostTitle);

        const newPostSubtitle = document.createElement("h6");
        newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary");
        newPostSubtitle.textContent = "#" + post.id;
        newPostBody.append(newPostSubtitle);

        const newPostText = document.createElement("p");
        newPostText.classList.add("card-text");
        newPostText.textContent = post.body;
        newPostBody.append(newPostText);

        const newPostButtonDelete = document.createElement("button");
        newPostButtonDelete.classList.add("btn", "btn-danger", "w-100");
        newPostButtonDelete.innerText = "DELETE";
        newPostBody.append(newPostButtonDelete);
        
        newPost.append(newPostBody);
        postContainer.append(newPost);
    }
}
```const url = "https://jsonplaceholder.typicode.com";
const buttonGetPosts = document.getElementById("buttonGetPosts");const postContainer = document.getElementById("post-container");const postForm = document.getElementById("post-form");
async function sendHTTPRequest(*method*, *url*, *data*) {    const reponse = await fetch(*url*, {        method: *method*,        body: JSON.stringify(*data*),        headers: { "Content-Type": "application/json", }    });    return await reponse.json();}
*// Form buttons events*postForm.addEventListener("submit", (*event*) => {    *event*.preventDefault(); *// Remove default action redirect form.*
    const title = *event*.currentTarget.querySelector("#postTitle").value;    const content = *event*.currentTarget.querySelector("#postBody").value;    createPost(title, content); *// (simulate, API not support method).*});buttonGetPosts.addEventListener("click", getPosts);
*// Articles delete button (simulate API not support method).*postContainer.addEventListener("click", (*event*) => {    if (*event*.target.tagName === "BUTTON") {        const postId = *event*.target.closest("article").id;        console.log(postId);        sendHTTPRequest("DELETE", url + "/posts/" + postId);    }});
async function createPost(*title*, *content*) {    const userId = Math.random();    const post = {        title: *title*,        body: *content*,        userId: userId,    };      sendHTTPRequest("POST", url + "/posts", post);}
async function getPosts() {    const responseData = await sendHTTPRequest("GET", url + "/posts");    console.log(responseData);
    for (const post of responseData) {        const newPost = document.createElement("article");        newPost.id = post.id;        newPost.classList.add("card", "mt-3");        newPost.style.width = "18rem";
        const newPostBody = document.createElement("div");        newPostBody.classList.add("card-body");
        const newPostTitle = document.createElement("h5");        newPostTitle.classList.add("card-title");        newPostTitle.textContent = post.title;        newPostBody.append(newPostTitle);
        const newPostSubtitle = document.createElement("h6");        newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary");        newPostSubtitle.textContent = "#" + post.id;        newPostBody.append(newPostSubtitle);
        const newPostText = document.createElement("p");        newPostText.classList.add("card-text");        newPostText.textContent = post.body;        newPostBody.append(newPostText);
        const newPostButtonDelete = document.createElement("button");        newPostButtonDelete.classList.add("btn", "btn-danger", "w-100");        newPostButtonDelete.innerText = "DELETE";        newPostBody.append(newPostButtonDelete);                newPost.append(newPostBody);        postContainer.append(newPost);    }}