removeChild supprimer un seul objet

**spooli** · 11/05/2009, 22h24

slt à tous ,

j'ai un probleme avec mon code

je vous explique

j'ai un code qui creer des elements dans un tableau avec appendChild

et je veux aussi mettre un lien pour supprimer l'element créer avecremoveChild

mais la fonction moins() me supprime tout les elements creer

j'ai pas compris pourquoi alors je vous demande votre aide je suis un peu debutant avec js merci d'avance

voila le code

Code :

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
 
<html>
	<head>
		<script language="javascript" type="text/javascript">
			var count = 1;
 
			function one_more_ligne () {
				count++;
				if(count<=5)
				{
				var tr = document.createElement("TR");
				var td_1 = document.createElement("TD");
				var td_2 = document.createElement("TD");
				var td_3 = document.createElement("TD");
				var td_4 = document.createElement("TD");
				var inp1 = document.createElement("INPUT");
				var inp2 = document.createElement("INPUT");
				var act1 = document.createElement("LABEL");
                var act2 = document.createElement("LABEL");
 
				act1.innerHTML = count;
				act2.innerHTML = '<font style="font-size:16px" color="#000000" face="Arial"><a href="new 2.html" onclick="moins()>Supprimer</a></font>';
 
				td_1.align="center";td_1.valign="top"; td_1.width="66"; td_1.height="38";
                td_2.align="center";td_2.valign="top"; td_2.width="66"; td_2.height="38";
				td_3.align="center";td_1.valign="top"; td_3.width="66"; td_3.height="38";
				td_4.align="center";td_4.valign="top"; td_4.width="66"; td_4.height="38";
 
				inp1.name="design"+count;inp1.type="text";inp1.id="design"+count;
				inp2.name="qte"+count;inp2.type="text";inp2.id="qte"+count;
 
				td_1.appendChild(act1);
				td_2.appendChild(inp1);
				td_3.appendChild(inp2);
				td_4.appendChild(act2);
				tr.appendChild(td_1);
				tr.appendChild(td_2);
				tr.appendChild(td_3);
				tr.appendChild(td_4);
				byId("Table1").getElementsByTagName('tbody')[0].appendChild(tr);
				}
			}
 
			function byId(elmId){
				var elm = document.getElementById(elmId);
				if(elm==null)
					elm = document.getElementsByName(elmId)[0];
 
				return elm;
			}
			function moins()
			{
			  var elm = "Table1";
              elm.getElementsByTagName('tbody')[0].removeChild(tr);
 
            }
		</script>
	</head>
 
	<body>
		<table style="position:absolute;left:2%;top:15%" width="60%"  cellpadding="0" cellspacing="0" border="1" id="Table1">
			<tbody>
				<tr>
				<td align="center" valign="top" width="66" height="15" ><font style="font-size:16px" color="#000000" face="Arial"><b>N°</b></font></td>
				<td align="center" valign="top" width="238" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Désignation</b></font></td>
				<td align="center" valign="top" width="110" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Quantité</b></font></td>
				<td align="center" valign="top" width="218" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Action</b></font></td>
				</tr>
				<tr>
				<td align="center" valign="middle" width="66" height="38"><font style="font-size:16px" color="#000000" face="Arial"><b>1</b></font></td>
				<td align="center" valign="middle" width="238" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="dest1"  name="dest1" value=""></font></td>
				<td align="center" valign="middle" width="110" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="qte1"  name="qte1" value=""></font></td>
				<td align="center" valign="middle" width="218" height="38"><font style="font-size:16px" color="#000000" face="Arial"><a href="#" >Supprimer</a></font></td>
				</tr>
			</tbody>
		</table><br><br>
		<a href="#" onclick="one_more_ligne();">[+] Une de plus</a>
	</body>
</html>

je fais appel a one_more_ligne () pour ajouter une ligne (tr et des td)
et moins() pour supprimer la ligne

un screen

**emmanuel.remy** · 12/05/2009, 01h43

Salut,

Merci pour ta capture, elle est très parlante. Je te passe ce code que j'ai remodelé et commenté, en restant dans l'état d'esprit de ton dév.

Code :

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
<html>
	<head>
		<script language="javascript" type="text/javascript">
			var count = 1;
			
			function one_more_ligne () {
				//attention tu ne dois pas incrémenter le compteur
				//avant le if sinon tu peux avoir un compteur sans fin en cas
				//de multiples clics alors qu'on a atteint le nombre max de lignes
				//autorisées
        if(count<=4)
				{
					count++;

				var tr = document.createElement("TR");
				var td_1 = document.createElement("TD");
				var td_2 = document.createElement("TD");
				var td_3 = document.createElement("TD");
				var td_4 = document.createElement("TD");
				var inp1 = document.createElement("INPUT");
				var inp2 = document.createElement("INPUT");
				var act1 = document.createElement("LABEL");
                var act2 = document.createElement("LABEL");
 
				act1.innerHTML = count;
				//moins(this.parentNode.parentNode.parentNode.parentNode): ce n'est pas très joli mais
				//je te laisse adapter par la suite
				//pour les parentNode: A > FONT > LABEL > TD > TR
        act2.innerHTML = '<font style="font-size:16px" color="#000000" face="Arial"><a href="#" onclick="moins(this.parentNode.parentNode.parentNode.parentNode);">Supprimer</a></font>';
				
				td_1.align="center";td_1.valign="top"; td_1.width="66"; td_1.height="38";
                td_2.align="center";td_2.valign="top"; td_2.width="66"; td_2.height="38";
				td_3.align="center";td_1.valign="top"; td_3.width="66"; td_3.height="38";
				td_4.align="center";td_4.valign="top"; td_4.width="66"; td_4.height="38";
				
				inp1.name="design"+count;inp1.type="text";inp1.id="design"+count;
				inp2.name="qte"+count;inp2.type="text";inp2.id="qte"+count;
                
				td_1.appendChild(act1);
				td_2.appendChild(inp1);
				td_3.appendChild(inp2);
				td_4.appendChild(act2);
				tr.appendChild(td_1);
				tr.appendChild(td_2);
				tr.appendChild(td_3);
				tr.appendChild(td_4);
				byId("Table1").getElementsByTagName('tbody')[0].appendChild(tr);
				}
			}
 
			function byId(elmId){
				var elm = document.getElementById(elmId);
				if(elm==null)
					elm = document.getElementsByName(elmId)[0];
			
				return elm;
			}
			
      //il faut passer en paramètre la ligne à supprimer
			function moins(tr)
			{
			  //tu avais oublié le byId
        var elm = byId("Table1");
              elm.getElementsByTagName('tbody')[0].removeChild(tr);
        //il faut décrémenter le compteur sinon on ne pourra pas ajouter de 
        //nouvelle ligne...     
        count--;
      }
		</script>
	</head>
	
	<body>
		<table style="position:absolute;left:2%;top:15%" width="60%"  cellpadding="0" cellspacing="0" border="1" id="Table1">
			<tbody>
				<tr>
				<td align="center" valign="top" width="66" height="15" ><font style="font-size:16px" color="#000000" face="Arial"><b>N°</b></font></td>
				<td align="center" valign="top" width="238" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Désignation</b></font></td>
				<td align="center" valign="top" width="110" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Quantité</b></font></td>
				<td align="center" valign="top" width="218" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Action</b></font></td>
				</tr>
				<tr>
				<td align="center" valign="middle" width="66" height="38"><font style="font-size:16px" color="#000000" face="Arial"><b>1</b></font></td>
				<td align="center" valign="middle" width="238" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="dest1"  name="dest1" value=""></font></td>
				<td align="center" valign="middle" width="110" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="qte1"  name="qte1" value=""></font></td>
				<td align="center" valign="middle" width="218" height="38"><font style="font-size:16px" color="#000000" face="Arial"><a href="#" >Supprimer</a></font></td>
				</tr>
			</tbody>
		</table><br><br>
		<a href="#" onclick="one_more_ligne();">[+] Une de plus</a>
	</body>
</html>

ERE

**SpaceFrog** · 12/05/2009, 08h31

En effet joli le screen animé ... tu as un freeware pour faire ce genre de captures ?

**spooli** · 12/05/2009, 09h07

Envoyé par emmanuel.remy

Salut,

Merci pour ta capture, elle est très parlante. Je te passe ce code que j'ai remodelé et commenté, en restant dans l'état d'esprit de ton dév.

ERE

merci
je viens de testé exactement ce que je voulais
j'ai ajouter aussi

if(count==5) { document.getElementById('aj').style.display='none'; } // pour faire disparaitre le button ajouter si on atteind max de case

et
if(count<5) { document.getElementById('aj').style.display='inline'; }

// pour le faire apparaitre

et ça marche nikel

pour le screen effectué par camtasia(shareware)