[Résolu] Faire disparaître des éléments 1 par 1.

Bonjour à tous, j'ai encore une fois un problème en JavaScript.
J'ai une liste div et j'aimerais que lorsque l'on clique sur un bouton les div disparaissent
progressivement les unes après les autres. J'ai essayé avec for ainsi que foreach mais je ne suis arrivé à rien de concluant. Merci beaucoup à ceux qui sauraient m'éclairer (;
Bonne soirée

Hello,

Je propose ceci vite fait avant d'aller dormir: https://jsfiddle.net/sLbt1zfc/

allan00958 a écrit :
Hello,

Je propose ceci vite fait avant d'aller dormir: https://jsfiddle.net/sLbt1zfc/

Merci beaucoup de ta réponse, j'ai adapté le code que tu m'as donné mais la console me retourne l'erreur suivante : TypeError: Cannot read property 'parentNode' of undefined
Une idée ? Bonne nuit (:

var search = document.getElementById('search');
search.addEventListener('click', function(){
  var links = document.querySelectorAll('.nav-links li');
  for(i = 0; i < links.length; i++) {
    setTimeout(function(){
        links[i].parentNode.removeChild(links[i])
    }, 1000 * i)
  }
})

Salut,

Sans avoir le code html c'est difficile d’être sur, mais a priori cela veut dire que ta variable links est vide

Re,

Je suis d'accord avec @Mathieuu. Sans le code html, je ne pourrais pas être certain.

Aussi, il ne faut pas oublier le mot clé 'let' dans la boucle for.

Salut,

+1 pour Mathieuu je pense que links est vide, c'esta dire que le sélecteur ".nav-links li" ne trouve rien. Ton DOM doit etre comme ça pour que ca marche :

<ul class="nav-links">
    <li></li>
</ul>

ou comme ça :

<div class="nav-links">
    <ul>
        <li></li>
    </ul>
</div>

Enfin bref t'as compris..

Sinon il faut que tu modifie le querySelectorAll pour que ca match avec ton DOM.
Modifié par _laurent (03 Sep 2020 - 10:28)

Merci à tous pour vos réponses, le problème est résolut en rajouter let :
( je ne comprends d'ailleurs pas car j'ai toujours fait sans et j'avais jamais eu de problème à cause de ça )

for(let i = 0; i < links.length; i++) {

Ma variable links n'était pas vide, elle suivait cette forme :

_laurent a écrit :

<div class="nav-links">
    <ul>
        <li></li>
    </ul>
</div>

Merci pour votre aide, je ne mets pas le sujet en résolut dans le cas ou quelque saurait m'expliquer pour l'histoire de let. Bonne journée ! (:

Ah effectivement.

Bah juste i était pas créé...
Généralement on croisait plutôt "var" :

for (var i = 0; i < 9; i++) {

"let" c'est juste un autre type de variable comme "const", "var", etc..
C'est essentiellement le scope qui la différencie de var si j'ai bien suivi.

a écrit :
let permet de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées. Le mot-clé var, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).
[...]

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let

Le mot clé 'var' à une porté de fonction, c'est à dire que sa portée et donc valeur sera globale à l'objet window. A la fin du script var i est égale à 0. Il n'y a qu'un seul contexte d'execution créé. Avec 'let' sa portée est limitée au bloc (un bloc est du code à l'intérieur des accolades, ici en l'occurence, la boucle for). Sa valeur est donc redefinie à chaque tour de boucle avec un nouveau contexte d'exécution créé à chaque fois qui capture la nouvelle valeur de i.

C'est un peu compliqué à expliquer, c'est lié à la portée des variables ("scope" en anglais), si tu veux chercher plus d'informations sur le net EDIT : Je viens de voir le lien de _laurent, c'est plutôt pas mal

En très gros si la variable i a déjà était définit localement dans un autre scope, i n'existe plus à l'endroit ou tu cherches à l'utiliser et tu obtiens une erreur parce que tu essayes d'utiliser une variable qui "n'existe plus" dans le nouveau scope.

Par contre si i n'a jamais était définit dans le script normalement cela fonctionne sans mot clé (mais de mémoire c'est un fonctionnement particulier qui ne correspond pas à une vrai déclaration/affectation de variable)
Modifié par Mathieuu (03 Sep 2020 - 14:38)

Merci à vous trois pour votre lumière, j'ai donc comprit le principe de scope.
Bonne fin d'après midi à tous !
Modifié par vzytoi (03 Sep 2020 - 16:52)

Hésite pas à mettre ton message en résolu en modifiant ton message précédant et en cochant la petite case précisant que le sujet est résolu.
Passe une excellente journée !
(source)
Modifié par allan00958 (03 Sep 2020 - 17:29)

Il faut savoir que ce problème de scope est propre à JavaScript. Dans la plupart des autres langage une variable est forcément limitée à la fonction dans laquelle elle est insérée, à son contexte. C'est un problème de conception du langage lié à son histoire, c'est pourquoi il a créé depuis peu (ES6) deux nouvelles variables : let et const.

Les bonnes pratiques recommandent de n'utiliser que ces deux dernières, sauf pour des raisons de rétrocompatibilité côté front bien sûr (mais tous les navigateurs sont capables de les utiliser depuis quelques temps déjà).
Modifié par Olivier C (04 Sep 2020 - 10:39)