aide pour une suppression dynamique d'une div

**snake-09** · 22/01/2010, 13h48

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 :

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
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;
	}
 
}

**snake-09** · 22/01/2010, 16h37

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 :

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
 
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;
	}
 
}

**Thes32** · 23/01/2010, 21h03

Salut,

pour supprimer un noeud tu dois utiliser la fonction removeChild

Code :

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

1
2
3
 
elt = document.getElementById('ma_div');
document.removeChild(elt);

**SpaceFrog** · 23/01/2010, 21h06

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

**snake-09** · 23/01/2010, 22h43

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...

**Bovino** · 23/01/2010, 22h49

Envoyé par snake-09

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

Envoyé par snake-09

Code :

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

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>");

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.

**snake-09** · 23/01/2010, 23h19

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 :

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
 
<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 :

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
 
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 :

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

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

**SpaceFrog** · 24/01/2010, 10h24

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

**snake-09** · 24/01/2010, 12h35

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.

**Bovino** · 24/01/2010, 12h43

Code html :

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

<div onclick="this.parentNode.removeChild(this)">Bla bla bla</div>

**snake-09** · 24/01/2010, 19h24

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 :

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

1
2
 
addEvent(div,"ondblclick",function(){this.parentNode.removeChild(this));

je me renseigne sur le sujet^^

**SpaceFrog** · 24/01/2010, 19h57

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

Code :

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

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

**snake-09** · 24/01/2010, 20h14

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

**SpaceFrog** · 24/01/2010, 20h56

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

aide pour une suppression dynamique d'une div

JavaScript

Discussions similaires

Partager

Partager