Discussion :

[iciMike]

Hello ! Je suis sur un exercice de création d'un site de e-commerce basique via une API local. J'ai réussi à créer panier qui se rempli avec pour chaque élément un bouton supprimer. Lorsque je l'utilise dans l'ordre (du haut vers le bas) : pas de problème mes articles sont bien supprimés mon panier s'actualise correctement (ainsi que mon localStorage). Par contre si je decide de supprimer mes articles de façon aléatoire : c'est le bazar (par exemple, si je supprime le dernier article de ma liste, c'est le premier qui disparait...) Happy Codeurs, pourriez vous regarder mon code et m'aider à trouver une solution ? MERCI !

Code :

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
 
        // Btn supprimer article //
        const deleteItem = document.querySelectorAll(".delete__item");
        deleteItem.forEach((btn) => {
            btn.addEventListener('click', e => {
            deleteItemSelect(e, items);
            });
 
// Dans LocalStorage : suppression de l'article sélectionné //
function deleteItemSelect(e, items) {
    let index = e.target.classList[1].slice();
    items.splice(index, 1);
    localStorage.setItem('anyItem', JSON.stringify(items));
 
    if (items.length === 0) {
        localStorage.removeItem('anyItem');
    }
    updateNumberArticles();
}

[javatwister]

Sans même regarder ton code, c'est clair que tu as donné le même id à tous tes articles...

Pour comparer, c'est comme si tu appelais tes 4 enfants "Jacques", "Jacques", "Jacques" et "Jacques".
Ou comme si tu proposais une liste d'articles... tous semblables.

[iciMike]

Merci de ta réponse mais, pourtant, chacun de mes articles à une id unique.
.
Je suis perdu...

[javatwister]

Ah non, je m'ai trompé

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

let index = e.target.classList[1].slice();

index renvoie zéro; logiquement, il devrait plutôt s'agir d'une chaîne puisque c'est l'identifiant d'une classe...

Quand tu passes index comme indice de début à splice, c'est logique que le premier élément du tableau soit supprimé, vu que c'est ce que tu demandes...;

Donc, revois la méthode slice()... Parce que là, la valeur sera identique pour tous les articles!

[iciMike]

Donc, revois la méthode slice()... Parce que là, la valeur sera identique pour tous les articles!

Ooohlalaaa... j'ai bien essayé de rentrer des valeurs mais du coup je ne suis vraiment pas sur que ce soit la bonne méthode. Je peux pas simplement dire à mon code : Tu vois cette id ? et bien tu le supprimes (du DOM et de ton array).

[javatwister]

C'est l''index de la collection que tu dois passer à onclick

[iciMike]

aouch... et je fais ça comment ?

[javatwister]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
deleteItem.forEach((btn,i) => btn.addEventListener('click', () =>  deleteItemSelect(i))
 
// Dans LocalStorage : suppression de l'article sélectionné //
function deleteItemSelect(index) {
	items.splice(index, 1);
	//...
}

[iciMike]

J'y ai cru tellement ça semblait beau mais... j'ai cette erreur

[javatwister]

Eh bien passe item en paramètre également (je ne sais pas où tu définis l'objet)

[iciMike]

Ok je verrais ça un peu plus tard. En tout cas MERCI de ton temps ! Je met le post en résolu par ce que je pense que j'ai tout ce qu'il me faut !
Encore MERCI !

[iciMike]

Petit update : Cela fonction effectivement PARFAITEMENT et grâce à tes précieux conseils ! MERCI !