Bonsoir, comment aller vous ?? Comment supprimer une dernière tâche de liste avec un bouton supprimer !!
Bonsoir, comment aller vous ?? Comment supprimer une dernière tâche de liste avec un bouton supprimer !!
Bonjour,
si tu veux vraiment de l'aide il va te falloir être plus clair quant à ton besoin.
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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 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 <!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>
Merci beaucoup pour le coup de main✋
Petite maj, tant que j'y suis (plus explicite?)
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 <!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>
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager