Supprimer des éléments d'une liste

**nelka94** · 30/12/2019, 08h49

Bonjour,

je me remets sur un exercice sur lequel je travaillais il y'a une dizaine de jours.
je travaille sur un exercice ou j'ajoute des éléments d'une liste puis je supprime certains éléments d'entre eux choisis à l'aide de boutons radio.
la suppression est aléatoire, je peux en cocher 2 qui seront supprimés et le coup d'après juste un sur 2 qui sera supprimé.

est ce que ma logique est fausse ou est ce que il y'a des subtilités js quand on essaye de supprimer plusieurs éléments suite à un clic.
vous verrez dans le code des icônes en trop, par ce que je teste un peu et que je prépare la question suivante.

Merci.
le js et le css ne sont pas dans un fichier à part.

Code HTML :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
    <style>
        li{
            display : inline-block;
            width: 200px;
        }
        .direction{
            display: inline-block;
            position: relative;
            bottom: -9px;
        }
    </style>
</head>
<body>
 
    <i class="material-icons">home</i>
    <i class="material-icons">cloud</i>
    <i class="material-icons">delete</i>
    <i class="material-icons">search</i>
 
 
    <ul id="liste">
 
 
    </ul>
    <form action="#">
        <input type="text" id= "champsdetexte">
        <button id="ajout"> ajouter</button>
        <button id="supprime">supprimer</button>
        <div class="direction">
            <i class="fa fa-caret-up" style="font-size:48px;color:green"></i>
            <i class="fa fa-caret-down" style="font-size:48px;color:green"></i>
        </div>
 
 
    </form>
 
 
    <script>
    let bouton = document.getElementById('ajout');
    var champsdetexte = document.getElementById('champsdetexte');
    var ul = document.getElementById('liste');
    var i=0;
    bouton.addEventListener('click',function(e){
        if(champsdetexte.value==""){
            e.preventDefault();
            alert('veuillez entrer des caractères dans le champs');
        }else{
            var div = document.createElement('div');
            var li = document.createElement('li');
            var mots = document.createTextNode(champsdetexte.value);
            let inp = document.createElement('input');
            inp.setAttribute("type","checkbox");
            let nomvar = "radio"+i;
            inp.setAttribute("name",nomvar);
            inp.setAttribute("id",nomvar);
            i++;
            li.appendChild(mots);
            div.appendChild(li);
            div.append(inp);
            ul.append(div);
            champsdetexte.value = "";
        }
    });
    let supprime = document.getElementById('supprime');
    let baliseInput = document.getElementsByTagName("input");
    supprime.addEventListener('click', function(){
        //let verifier = false;
        //console.log("this",this);
        for(let i=0; i<baliseInput.length; i++){
            //console.log("tour de boucle", i);
            if(baliseInput[i].checked){
                console.log("test if", i);
                let parent = baliseInput[i].parentNode;
                //console.log("parent de ", i);
                ul.removeChild(parent);
                //console.log("apres suppression" , i);
            }
        }
    });
    </script>
</body>
</html>

Invité · 30/12/2019, 09h23

Bonjour,

pour éviter de "soumettre" le formulaire, il faut des <button type="button"> (sinon, par défaut, c'est "submit") :

Code HTML :

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

1
2
        <button type="button" id="ajout"> ajouter</button>
        <button type="button" id="supprime">supprimer</button>

Et, en l'occurrence, on peut supprimer les balises <form> </form>.

Ensuite, tu devrais mettre une classe sur les <input type="checkbox"> * : ce serait plus simple à cibler.
* que tu appelles improprement "radio".

Code :

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

1
2
    inp.type ="checkbox";
    inp.classList.add("checkdelete");

**nelka94** · 30/12/2019, 11h01

Bonjour jreaux62,

merci pour ton aide.
je sais que mon code laisse à désirer, qu'il faudra que je revois les subtilités des formulaires.
je prenais séquentiellement ce qui m'intéressait via des recherches google de bouts de code.

si mon programme ne fonctionne pas correctement, cela vient de la boucle for, non?

Code HTML :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
    <style>
        li{
            display : inline-block;
            width: 200px;
        }
        .direction{
            display: inline-block;
            position: relative;
            bottom: -9px;
        }
    </style>
</head>
<body>
 
    <i class="material-icons">home</i>
    <i class="material-icons">cloud</i>
    <i class="material-icons">delete</i>
    <i class="material-icons">search</i>
 
 
    <ul id="liste">
 
 
    </ul>
    <form action="#">
        <input type="text" id= "champsdetexte">
        <button type="button" id="ajout"> ajouter</button>
        <button type="button" id="supprime">supprimer</button>
        <div class="direction">
            <i class="fa fa-caret-up" style="font-size:48px;color:green"></i>
            <i class="fa fa-caret-down" style="font-size:48px;color:green"></i>
        </div>
 
 
    </form>
 
 
    <script>
    let bouton = document.getElementById('ajout');
    var champsdetexte = document.getElementById('champsdetexte');
    var ul = document.getElementById('liste');
    var i=0;
    bouton.addEventListener('click',function(e){
        if(champsdetexte.value==""){
            e.preventDefault();
            alert('veuillez entrer des caractères dans le champs');
        }else{
            var div = document.createElement('div');
            var li = document.createElement('li');
            var mots = document.createTextNode(champsdetexte.value);
            let inp = document.createElement('input');
            inp.setAttribute("type","checkbox");
            inp.classList.add('checkdelete');
            let nomvar = "checkbox"+i;
            inp.setAttribute("name",nomvar);
            inp.setAttribute("id",nomvar);
            i++;
            li.appendChild(mots);
            div.appendChild(li);
            div.append(inp);
            ul.append(div);
            champsdetexte.value = "";
        }
    });
    let supprime = document.getElementById('supprime');
    let baliseInput = document.getElementsByClassName('checkdelete');
    
    supprime.addEventListener('click', function(){
        //let verifier = false;
        //console.log("this",this);
        for(let i=0; i<baliseInput.length; i++){
            //console.log("tour de boucle", i);
            if(baliseInput[i].checked){
                //console.log("test if", i);
                let parent = baliseInput[i].parentNode;
                //console.log("parent de ", i);
                ul.removeChild(parent);
                //console.log("apres suppression" , i);
            }
        }
    });
    </script>
</body>
</html>

Invité · 30/12/2019, 11h25

Code :

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

1
2
3
4
5
    let supprime = document.getElementById('supprime');
 
    supprime.addEventListener('click', function(){
        let baliseInput = document.getElementsByClassName('checkdelete');
...

**CosmoKnacki** · 30/12/2019, 11h26

Et si tu remplaces:

Code :

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

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

par

Code :

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

for(let i = baliseInput.length - 1; i >= 0; i--)

ça donne quoi?

**nelka94** · 30/12/2019, 11h44

merci jreaux62 et CosmoKnacki, ça semble marcher. Merci.

**NoSmoking** · 30/12/2019, 19h31

Bonjour,

Envoyé par CosmoKnacki

...
ça donne quoi?

il me semble intéressant de noter le pourquoi.

• Les méthodes document.getElements.......() renvoient une HTMLCollection.

Une HTMLCollection est une liste dynamique de noeuds, elle est automatiquement mise à jour en cas de suppression/ajout d'éléments, correspondant aux critères, dans le DOM, en d'autres termes tout changement dans le DOM affecte le contenu de la Collection.

• La méthode Node.querySelectorAll() renvoie une NodeList.

Une NodeList est une liste, collection statique de noeuds, elle n'est pas mise à jour en cas de suppression/ajout d'éléments, en d'autres termes tout changement dans le DOM n'affecte pas le contenu de la NodeList.

• En partant de ce code HTML simple

Code html :

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

1
2
3
4
5
6
7
8
<ul>
  <li>1
  <li class="pair">2
  <li>3
  <li class="pair">4
  <li>5
  <li class="pair">6
</ul>

... en passant par une HTMLCollection on peut écrire :

Code :

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

1
2
3
4
5
6
// HTMLCollection
const elements = document.getElementsByClassName("pair");
while(elements[0]){
  elements[0].remove()
}
console.log(elements); // > HTMLCollection*[] ou HTMLCollection { length: 0 }

... en passant par une NodeList on peut écrire :

Code :

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

1
2
3
4
// NodeList
const elements = document.querySelectorAll(".pair");
elements.forEach((el) => el.remove());
console.log(elements); // > NodeList(3)*[li.pair, li.pair, li.pair]

Le résultat est le même, le mode opératoire non.

Pour info : remove et forEach sur les NodeList ne sont pas supportés par IE.

Supprimer des éléments d'une liste

JavaScript

Discussions similaires

Partager

Partager