Modifier et supprimer (PUT/DELETE)

🎯 Objectif

Ajouter les fonctionnalités modifier (PUT) et supprimer (DELETE) pour compléter le CRUD.

📖 Contexte

L'application gère déjà la lecture (GET) et la création (POST). Il reste les deux dernières opérations du CRUD : modifier et supprimer.

Les 4 opérations CRUD

Requête PUT (modifier)

const response = await fetch("https://dummyjson.com/products/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "Nouveau titre" })
})

Requête DELETE (supprimer)

const response = await fetch("https://dummyjson.com/products/1", {
  method: "DELETE"
})

DELETE est la méthode la plus simple : pas de body, juste la méthode et l'URL.

data-id : stocker l'ID dans le HTML

Chaque bouton porte un attribut data-id qui contient l'ID du produit :

<button class="btn-edit" data-id="5">✏️</button>

En JavaScript, on le récupère avec bouton.dataset.id.

Événements délégués

Au lieu d'ajouter un écouteur sur chaque bouton, on écoute les clics sur le tbody (le parent). Quand un bouton est cliqué, l'événement "remonte" jusqu'au tbody :

tbody.addEventListener("click", function(e) {
  if (e.target.classList.contains("btn-delete")) {
    // Le bouton supprimer a été cliqué
  }
})

📝 Consigne

1. Complète modifierProduit(id, nouveauTitre) : envoie une requête PUT
2. Complète supprimerProduit(id) : envoie une requête DELETE
3. Complète le gestionnaire de clic : appelle les fonctions et mets à jour le tableau local