Supprimer une liste de tâches

Version imprimable

20/11/2020, 00h27
Wendkuuni

Supprimer une liste de tâches

Bonsoir, comment aller vous ?? Comment supprimer une dernière tâche de liste avec un bouton supprimer !!
22/11/2020, 11h23
NoSmoking

Bonjour,
si tu veux vraiment de l'aide il va te falloir être plus clair quant à ton besoin.
22/11/2020, 11h38
Wendkuuni

Exercice

Ok L'exercice dit ceci
Mettez en place une application de liste des tâches.A partir d'une page contenant un champ de saisie et trois boutons.
1-Un bouton <Ajouter une tâche > pour ajouter tâche saisie dans le champ de saisie.Ce bouton reste désactiver tant que le champ de saisie est vide.
2-Un bouton <Supprimer> pour supprimer la dernière tâche en liste.
3-Un bouton <Vider> pour supprimer toutes les tâches

Vieux script un peu naïf sur le même sujet (à charger):

Code:

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
.hide {display:none;}
#cadre {margin-left:100px;width:200px;}
</style>
 
</head>
 
<body>
 
<form id="frm" action="">
<div id="cadre">
</div>
 
<p>
<input type="button" id="ajout" value="ajouter un champ" /> 
<input type="button" class="hide" id="sup" value="supprimer un champ" /> 
<input type="button" class="hide" id="all" value="tout supprimer" />
</p>
</form>
 
 
<script>
 
window.addEventListener("DOMContentLoaded",()=>{
        let cadre, collec, champ;
 
document.getElementById("ajout").addEventListener("click",()=>{
        cadre=document.getElementById("cadre");
        collec=cadre.getElementsByTagName("input");
        champ=document.createElement("input");
 
        champ.setAttribute("type","text");
        champ.setAttribute("name","ch"+collec.length);
        cadre.appendChild(champ);
 
        document.getElementById("sup").classList.remove("hide");
        document.getElementById("all").classList.remove("hide");
})
 
document.getElementById("sup").addEventListener("click",(e)=>{
 
        if(!collec[1]){
                e.target.classList.add("hide");
                document.getElementById("all").classList.add("hide");
 
        }
        if(collec[0]){  
                cadre.removeChild(collec[collec.length-1])
        }
})
 
document.getElementById("all").addEventListener("click",(e)=>{
        while(cadre.lastChild) cadre.removeChild(cadre.lastChild);
        e.target.classList.add("hide");
        document.getElementById("sup").classList.add("hide");
})
 
})
 
</script>
 
</body>
</html>

22/11/2020, 12h38
Wendkuuni

Merci beaucoup pour le coup de main✋

Petite maj, tant que j'y suis (plus explicite?)

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
 
<style>
.hide {display:none;}
#cadre {margin-left:100px;width:250px;}
input {display:inline-block;margin:10px}
</style>
 
</head>
 
<body>
 
<script>
 
window.addEventListener("DOMContentLoaded",()=>{
        const cadre=document.getElementById("cadre"),
        champ=document.createElement("input"),
        lab=document.createElement("label");
        let collec;
 
        document.getElementById("ajout").addEventListener("click",()=>{
                collec=cadre.getElementsByTagName("input");
                collec2=cadre.getElementsByTagName("label");
                clonech=champ.cloneNode();
                clonelab=lab.cloneNode();
 
                clonech.setAttribute("type","text");
                clonech.setAttribute("name","ch"+collec.length);
                clonelab.textContent="tâche " + collec.length;
                cadre.appendChild(clonelab);
                clonelab.appendChild(clonech);
 
                document.getElementById("sup").classList.remove("hide");
                document.getElementById("all").classList.remove("hide");
        })
 
        document.getElementById("sup").addEventListener("click",(e)=>{
                if(!collec[1]){
                        e.target.classList.add("hide");
                        document.getElementById("all").classList.add("hide");
                }
                else if(collec[0]){     
                        cadre.removeChild(collec2[collec.length-1])
                }
        })
 
        document.getElementById("all").addEventListener("click",(e)=>{
                while(cadre.lastChild) cadre.removeChild(cadre.lastChild);
                e.target.classList.add("hide");
                document.getElementById("sup").classList.add("hide");
        })
 
})
 
</script>
 
<form id="frm" action="">
<div id="cadre">
</div>
 
<p>
<input type="button" id="ajout" value="ajouter un champ" /> 
<input type="button" class="hide" id="sup" value="supprimer un champ" /> 
<input type="button" class="hide" id="all" value="tout supprimer" />
</p>
</form>
 
</body>
</html>