Método DELETE en JavaScript

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.

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

Cordial saludo, esta es otra forma que se puede resolver el Método Delete ```js 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); } }); */ ```

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

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

**RESUMEN:** 

Hi! Aquí nuevamente mis notas sobre cada parte del código, si algo se puede mejorar, díganme! ```js /* 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}` ); } }); ```

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

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