Discussion :

[marieD83]

Bonjour tout le monde !

Je travaille actuellement sur mon portfolio. Je présente mes réalisations en grille : 2 row, 4 projets par row. En dessous de chaque row, il y a une div "row-detail" où j'affiche le détail du projet. Mais je veux aussi pouvoir fermer le détail.

J'ai donc ajouté dans mon code Javascript une img "croix" qui s'affiche à chaque détail que l'on ouvre. Lorsqu'on clique dessus, le détail du projet se cache.
Mon code fonctionne lorsqu'on ouvre le détail d'un projet et qu'on le referme directement avec le bouton. Mais quand on ouvre le détail de plusieurs projets avant de cliquer dessus, rien ne se passe.

Vous pouvez voir mon code et le problème que je rencontre ici : https://jsfiddle.net/marieD83/pv04dyay/1/
Avez-vous une idée d'où cela peut venir ?
Merci beaucoup !

[-Rpass-]

Tout simplement car tu as mis le même id à tous tes articles, donc quand tu en ouvres plusieurs il ne sait plus lequel supprimer

Tip : quand tu as des incohérences comme celle ci regarde les erreurs dans la console Javascript de ton navigateur

[01001111]

bonjour, essaie avec

Code javascript :

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

$active[0].querySelector("#remove").addEventListener("click", removeElement);

à la place de

Code javascript :

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

document.getElementById("remove").addEventListener("click", removeElement);

Théoriquement, oui l'id identique est un problème, mais dans la pratique non, puisqu'elle ne fait pas appel aux id pour la sélection des éléments.
C'est bien l'id de la croix qui pose problème.

[-Rpass-]

Petite rectification en regardant un peu plus le code ça ne vient pas de l'id de l'article mais de l'id de la croix, vu qu'il y en a plusieurs tu ne peux plus récupérer l'évènement onclick sur l'id. Enfin c'est le même principe, c'est un problème d'ID dans ton cas

[marieD83]

Merci pour vos réponses.
Pour l'ID des articles, j'avais fait des copier coller sur JSFiddle et avais oublié de modifier ça (mais dans mon projet il n'y avait pas cette erreur).
En effet, le problème venait bien de l'ID du bouton. J'ai remplacé "document.getElementById" par "$active[0].querySelector" et ça marche parfaitement. Merci beaucoup, 01001111 !