aide pour une suppression dynamique d'une div

Version imprimable

bonjour,

je viens demander un pti coup de main car j'ai un petit probleme que je ne parvien pas à résoudre.

je vous expose mon probleme.

avec une fonction je crée une div dynamiquement que j'insere sur un pahe html.
cette div je la rend draggable et j'y ajoute une image des champs de texte et un bouton. avec un double clic sur le bouton, je désire supprimer la div qui contien le bouton d'appel a la fonction de suppression. c'est là qu'intervien mon probleme, je n'arrive pas au resultat attendu.

voici le code de la fonction en question. si quelqu'un pouvais m'aider ça serais sympa ^^

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
document.write("<script type='text/javascript' src='prototype.js'></scr"+"ipt>");
document.write("<script type='text/javascript' src='scriptaculous.js'></scr"+"ipt>");
document.write("<script type='text/javascript' src='del_comp.js'></scr"+"ipt>");
 
function new_comp(type,num){
 
 
 
	div = document.createElement("div");
	div.id = (type+num);
	alert (div.id);
 
	new Draggable(div);
 
	switch (type){
 
					case "pc":
						div.innerHTML = '<script type="text/javascript" function del_comp(id){document.getElementById(id).parentNode.removeChild(document.getElementById(id))}"></script><input type="text" size="5" value="pc' + num + '"><input type="button"style="font-family:verdana; font-size:10;" value="supr" ondblclick="alert('+div.id+'); del_comp('+div.id+'); "> <br><img src="./images/pc.png" style="cursor:hand;"><br><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255">'
						document.getElementById("new").appendChild(div);
 
					break;
 
					case "cable":
						div.innerHTML = '<img src="./images/cable.png">'
						document.getElementById("new").appendChild(div);
					break;
 
					case "routeur":
						div.innerHTML = '<img src="./images/routeur.png">'
						document.getElementById("new").appendChild(div);
					break;
 
					case "routeurSf":
 
						div.innerHTML = '<img src="./images/routeurSf.png">'
						document.getElementById("new").appendChild(div);
					break;
 
					case "internet":
						div.innerHTML = '<img src="./images/internet.png">'
						document.getElementById("new").appendChild(div);
					break;
	}
 
}

actualisation

Bonjour,

j'ai avancer un peti peu,

j'arrive a delete une div mais seulement je ne peu delete que la dernière div creer... si quelqu'un sait comment je pourais fixer le nom de la div dans la div elle même pour pouvoir en creer autan que besoin et supprimer n'importe laquelle ...

un petit coup de main serait le bienvenu.

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
 
document.write("<script type='text/javascript' src='scriptaculous.js'></scr"+"ipt>");
document.write("<script type='text/javascript' src='del_comp.js'></scr"+"ipt>");
 
function new_comp(type,num){
 
 
 
	div = document.createElement("div");
	div.id = (type+num);
	new Draggable(div);
 
	switch (type){
 
					case "pc":
						div.innerHTML = '<script> var nom=div.id</script><input type="text" size="5" value="pc' + num + '"><input type="button"style="font-family:verdana; font-size:10;" value="supr" ; ondblclick="alert(nom);del_comp(nom);"> <br><img src="./images/pc.png" style="cursor:hand;"><br><p>@ip:<input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"></p>'
						document.getElementById("monReseau").appendChild(div);
 
					break;
 
					case "cable":
						div.innerHTML = '<img src="./images/cable.png">'
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "routeur":
						div.innerHTML = '<img src="./images/routeur.png">'
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "routeurSf":
 
						div.innerHTML = '<img src="./images/routeurSf.png">'
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "internet":
						div.innerHTML = '<img src="./images/internet.png">'
						document.getElementById("monReseau").appendChild(div);
					break;
	}
 
}

23/01/2010, 21h03
Thes32
Salut,

pour supprimer un noeud tu dois utiliser la fonction removeChild
Code:

1 2 3 elt = document.getElementById('ma_div'); document.removeChild(elt);
23/01/2010, 21h06
SpaceFrog

Pourquoi le document.write sur les scripts externes ???
23/01/2010, 22h43
snake-09

re

merci pour la réponse, oui j'ai trouver le remooveChil().

Je pesne que je n'ai pas été très clair dans ma question.

ce que j'ai essayer de faire c de creer des div de manière dynamique. jusqu'ici pas de probleme. dans le code html de ces div je creer une variable js dans laquelle je stock l'id de la div lors de sa création et un bouton qui avec un dbclick devrai supprimer la div.

or le probleme c que si je crée 2, 3 ... x div. qu'el que soit la div sur laquelle je vais cliquer, seule la dernière div crée sera supprimer... et je ne comprend pas pourquoi...

PS: sapceForg je n'ai pas compris t'a quetion...

Citation:

Envoyé par snake-09

PS: sapceForg je n'ai pas compris t'a quetion...
Citation:
Envoyé par snake-09
Code:

1 2 3 document.write("<script type='text/javascript' src='prototype.js'></scr"+"ipt>"); document.write("<script type='text/javascript' src='scriptaculous.js'></scr"+"ipt>"); document.write("<script type='text/javascript' src='del_comp.js'></scr"+"ipt>");
Citation:

Envoyé par SpaceFrog

Pourquoi le document.write sur les scripts externes ???

:)

Sinon, pour répondre à ta question, il faudrait nous montrer le code en question ainsi que le HTML en rapport.

ha oki alors le document.write( blablabla) c la seule façon que j'ai trouver pour faire appel à des .js depuis un autre fichier .js

après si je pouvais vous faire parvenir une archive pour le code html associer vous comprendriez dessuite de quoi je parle? est ce qu'il y a un moyen de poster des archive sur ce forum ?

le code de la page html sur laquelle je rajoute des div

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
 
<html>
    <head>
		<title>easy network</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
 
 
<body>
<script type="text/javascript" src="new_comp.js"></script>
<script>var c=0;var p=0;var rt=0;var rtsf=0; var i=0;</script>
 
<div id="menu">
 
	<a href="PTUT.html"onMouseOver="JavaScript:news.src='./images/new2.png';"onMouseOut ="JavaScript:news.src='./images/new1.png';" onclick = "document.reload();"><img src="./images/new1.png" name="news" border="0"></a> &nbsp;
	<a href="menu.html"onMouseOver="JavaScript:save.src='./images/save2.png';"onMouseOut ="JavaScript:save.src='./images/save1.png';"onclick = "save();"><img src="./images/save1.png" name="save" border="0"></a> &nbsp;
</div>
 
<div class="spacer"></div>
 
<div id="composant"> 			
			<div id=composant;>
			<p> Liste des composants d'un réseau </p><br>
			<img src="./images/pc.png" style="cursor:hand;" onclick="new_comp('pc',p);p++;"><br>
			<img src="./images/routeur.png" style="cursor:hand;" onclick="new_comp('routeur',rt);rt++;"><br>
			<img src="./images/routeurSf.png" style="cursor:hand;" onclick="new_comp('routeurSf',rtsf);rtsf++;"><br>
			<img src="./images/cable.png" style="cursor:hand;" onclick="new_comp('cable',c);c++;"><br>
			<img src="./images/internet.png" style="cursor:hand;" onclick="new_comp('internet',i);i++;"><br>
			</div>
</div>
 
<div class="spacer2"></div>
 
<div id="monReseau">
 
</div>
 
 
</body>
 
</html>

le code de la fonction new_comp() dans un ".js" a part:

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
 
document.write("<script type='text/javascript' src='prototype.js'></scr"+"ipt>");
document.write("<script type='text/javascript' src='scriptaculous.js'></scr"+"ipt>");
document.write("<script type='text/javascript' src='del_comp.js'></scr"+"ipt>");
 
function new_comp(type,num){
 
 
 
	div = document.createElement("div");
 
	new Draggable(div);
	div.id = (type+num);
 
	switch (type){
 
					case "pc":
 
						div.innerHTML = '<script> var nom=div.id</script><input type="text" size="5" value="'+type+'' + num + '"><input type="button"style="font-family:verdana; font-size:10;" value="supr" ; ondblclick="del_comp(nom);"> <br><img src="./images/pc.png" style="cursor:hand;"><p>@ip:<input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><br>@reseau:<input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"></p>'
						document.getElementById("monReseau").appendChild(div);
 
					break;
 
					case "cable":
						alert('pas encore traité');
					break;
 
					case "routeur":
						div.innerHTML = '<script> var nom=div.id</script><input type="text" size="5" value="'+type+'' + num + '"><input type="button"style="font-family:verdana; font-size:10;" value="supr" ; ondblclick="del_comp(nom);"> <br><img src="./images/routeur.png"><p>@reseau:<input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"></p>'
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "routeurSf":
 
						div.innerHTML = '<script> var nom=div.id</script><input type="text" size="5" value="'+type+'' + num + '"><input type="button"style="font-family:verdana; font-size:10;" value="supr" ; ondblclick="del_comp(nom);"> <br><img src="./images/routeurSf.png"><p>@reseau:<input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"><input type="text"size="1" maxlength="3" value="255"></p>'
						document.getElementById("monReseau").appendChild(div);
					break;
 
					case "internet":
						div.innerHTML = '<img src="./images/internet.png">'
						document.getElementById("monReseau").appendChild(div);
					break;
	}
 
}

et enfin le code de la fonction del_comp() aussi dans un ".js" a part.

Code:

1
2
3
4
 
function del_comp(id){
	document.getElementById(id).parentNode.removeChild(document.getElementById(id))
}

24/01/2010, 10h24
SpaceFrog

Un peu de lecture sur comment ajouter dynamiquement des objets (et scripts) dynamiquement sans qu'ils te posent problème par la suite si tu as besoin de les appeler par le DOM.
Tu n'as pas forcément besoin d'utiliser cette librairie, mais au moins tu y trouveras les fonctions telles que document.createElement()

http://www.developpez.net/forums/d53...dynamique+form
24/01/2010, 12h35
snake-09

merci spaceFrog mais je vais faire autrement avec un input text fixe dans lequel je devrai entrer le nom de la div a supprimer car je n'arrive pas a faire autrement.
24/01/2010, 12h43
Bovino

Code:

<div onclick="this.parentNode.removeChild(this)">Bla bla bla</div>
24/01/2010, 19h24
snake-09
merci de ta réponse bovino donc ce code permet de supprimer l'objet courant en cliquant dessus. seulement comme je crée la div en utilisant
document.createElement("div"); je n'ai assigner aucunt evenement dans la div.

je suppose que je dois faire dessuite après la création un truc du style
Code:

1 2 addEvent(div,"ondblclick",function(){this.parentNode.removeChild(this));
je me renseigne sur le sujet^^

:roll: si tu avais étudié le lien donné plus haut :
Code:

1 2 3 var mydiv=document.createElement('div'); mydiv.ondblclick=function(){this.parentNode.removeChild(this)};

24/01/2010, 20h14
snake-09

merci spacefrog c la solution que je cherchais mais j'avais vu dans d'autre forum que ça se faisait pas comme ça pour les evenement... mais avec un addevent.

merci en tt cas
24/01/2010, 20h56
SpaceFrog

si tu crées un div ... il ne possède pas encore de onclick, tu peux donc lui en attribuer un sans crainte d'effacer un eventuel onclick existant.

SI le div existe déja et que tu ne souhaites pas ecraser le contenu existant des ses evènements il faut en effet passe par addEventListener