Bonjour,
j'espère que je poste ce message au bon endroit histoire de ne pas me faire taper sur les doigts par un modo .

Voilà, j'ai un petit soucis dans le code que je vais vous linker ci après, j'ai réussi à créer une page panier dynamique en récupérant l'id, la quantité et la couleur sélectionné par l'utilisateur dans le localStorage et je récupère les informations de noms, de prix et d'image + texte alternatif de mon API.

Je veux maintenant ajouter la possibilité de supprimer un article mais rien ne se passe, et la console me renvoie une erreur "undefined". Je suis là-dessus depuis hier, et malgré de nombreuses recherches (et révisions de cours), je n'arrive pas trouver de solutions.

J'espère que l'un d'entre vous pourra m'aider un peu, je ne veux pas d'une réponse toute faite, juste qu'on m'aiguille et qu'on m'explique ce qui créé cette erreur. Merci d'avance !

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// Récupère les données de mon stockage local
let canapLocalStorage = JSON.parse(localStorage.getItem("cart"));
console.log(canapLocalStorage);
 
//Fonction de mise à jour du panier du prix et de la quantité
function updateCart() {
  // Met à jour le stockage local
  localStorage.setItem("cart", JSON.stringify(canapLocalStorage));
}
 
canapLocalStorage.forEach((cartItem) => {
  fetch("http://localhost:3000/api/products/" + cartItem.idKanap)
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      //console.log(data);
      if (canapLocalStorage === null || canapLocalStorage == 0) {
        const positionEmptyCart = document.getElementById("cart__items");
        const emptyCart = `Votre panier est vide`;
        positionEmptyCart.innerHTML = emptyCart;
      } else {
        document.getElementById(
          "cart__items"
        ).innerHTML += `<article class="cart__item" data-id=${cartItem.idKanap} data-color="${cartItem.colorKanap}">
        <div class="cart__item__img">
            <img src=${data.imageUrl} alt=${data.altTxt}>
            <div class="cart__item__content">
                  <div class="cart__item__content__description">
                    <h2>${data.name}</h2>
                    <p>${cartItem.colorKanap}</p>
                    <p>${data.price} €</p>
                  </div>
                  <div class="cart__item__content__settings">
                    <div class="cart__item__content__settings__quantity">
                      <p>Qté : </p>
                      <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value=${cartItem.quantityKanap}>
                    </div>
                    <div class="cart__item__content__settings__delete">
                      <p class="deleteItem">Supprimer</p>
                    </div>
                  </div>
                </div>
        </article>`;
      }
    })
    .catch((error) => console.log("Erreur : " + error));
});
console.log(canapLocalStorage);
 
 
 
function deleteCartItem(){
  const deleteButtons = document.querySelectorAll(".deleteItem");
  deleteButtons.forEach((button) => {
    button.addEventListener("click", (event) => {
      const article = event.target.closest("article");
      const articleId = article.getAttribute("data-id");
      const articleColor = article.getAttribute("data-color")
 
      canapLocalStorage.forEach((item, index) => {
        if(item.idKanap === articleId && item.colorKanap === articleColor) {
          canapLocalStorage.splice(index,1);
 
          updateCart();
        }
      })
    })
  })
}
deleteCartItem();
console.log(deleteCartItem());