Supprimer un DIV dynamiquement

**SPACHFR** · 26/05/2009, 16h19

Bonjour,

J'essaie de mettre au point un �quivalent de tooltip pour un textarea.
J'arrive � cr�er le DIV et � l'afficher, mais mon probl�me est de le supprimer.

Existe t'il la m�thode inverse � "document.createElement" ?
Mon ami Google est tr�s discret sur le sujet.....

Voici un exemple du code que j' utilise pour mon test.
Le div cr�� est en fond rouge (pas beau mais j'exp�rimente).

Il y a 2 fonctions :

ChangeArea : change la taille du "textarea"
ShowComment : qui affiche le contenue du "textarea"

C'est le Div cr�� par ShowComment que je souhaiterai supprimer

Merci

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>
<script>
function ChangeArea(ObjId,val) {
 var Obj = document.getElementById(ObjId);
 if (val==0) {
	Obj.style.height = "60px";
 } else if (val==1) {
	Obj.style.height = "20px";
 }
}
function ShowComment(ObjId,ev) {
 if(!document.getElementById('CCpt')) {
	var Obj = document.getElementById(ObjId);
	Xpos = ev.clientX;
	Ypos = ev.clientY;
	var CCpt = document.createElement('div');
	CCpt.id ='ccpt';
	CCpt.style.position ="absolute";
	CCpt.style.top = Ypos;
	CCpt.style.left = Xpos;
	CCpt.style.width = "200px";
	CCpt.style.height = "200px";
	CCpt.style.backgroundColor ="red";
	CCpt.innerHTML = Obj.value;
	CCpt.style.visibility ="visible";
	document.body.appendChild(CCpt);
 }
}
</script>
</head>
<body>
<div id="tt">
<input type="text" id="inpt1" value="ligne1">
<TEXTAREA id="txt1" style="height:20px" COLS="50" onfocus="ChangeArea(this.id,0);" onblur="ChangeArea(this.id,1);" onmousemove="ShowComment(this.id,event)";>
TEST
</textarea>
</div>
</body>
</html>

**SpaceFrog** · 26/05/2009, 16h36

Soit tu le cr�es � chaque fois et du coup tu fais un removeCHild,
soit tu ne le cr�es qu'une fois et tu changes son display

**SPACHFR** · 26/05/2009, 16h54

Merci pour ces r�ponses,

J'ai bien pens� � passer le "display" en "hidden", mais dans ma page d�finitive, je vais avoir n lignes ayant un "textarea" (cr��es dynamiquement sur action de l'utilisateur). Donc j'ai pas trop envie de trainer des DIV pour rien.

Je vais regarder removeCHild �a me semble bien.....

MERCI

**SpaceFrog** · 26/05/2009, 16h56

un seul div suffit ...
il suffit d'en changer le contenu et de le positionner ou tu veux ...

**bigboomshakala** · 26/05/2009, 18h24

Envoy� par SPACHFR

Merci pour ces r�ponses,

J'ai bien pens� � passer le "display" en "hidden", mais dans ma page d�finitive, je vais avoir n lignes ayant un "textarea" (cr��es dynamiquement sur action de l'utilisateur). Donc j'ai pas trop envie de trainer des DIV pour rien.

Je vais regarder removeCHild �a me semble bien.....

MERCI

display > none
visibility > hidden

**SPACHFR** · 27/05/2009, 09h35

Envoy� par SpaceFrog

un seul div suffit ...
il suffit d'en changer le contenu et de le positionner ou tu veux ...

En fait il s'agit "d'�v�nements utilisateur que j'envoie lorsque l'ensemble des saisie sont finies vers le serveur via un requ�te XMLHttpRequest.

L'ensemble des �v�nements sont affich�s au fur et � mesure de leurs d�clarations. La zone textarea est en fait des commentaires utilisateurs.
Le but final et obtenir l'�quivalent d'un tooltips lors du passage sur le textarea et de l'afficher sous la position courante de la sourie.
Je ne suis pas loin du r�sultat reste � supprimer le div puis de g�rer correctement l'affichage.

**SPACHFR** · 27/05/2009, 10h14

Je ne m'en sort pas avec le removeChild, j'ai du louper un truc.
Lors de l'�v�nement 'onMouseOut', j'ai l'erreur suivante :

Ligne 38 Le type ne correspond pas

C'est dans ma fonction HideComment mais je ne comprend pas pourquoi...

Pourriez vous m'indiquer mon erreur

Merci

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
 
<html>
<head>
<script>
function ChangeArea(ObjId,val) {
 var Obj = document.getElementById(ObjId);
 if(document.getElementById('ccpt')) {
    var CCpt = document.getElementById('ccpt');
	document.body.removeChild(CCpt);
 
 }
 if (val==0) {
	Obj.style.height = "60px";
 } else if (val==1) {
	Obj.style.height = "20px";
 }
}
function ShowComment(ObjId,ev) {
  Xpos = ev.clientX;
  Ypos = ev.clientY;
 if(!document.getElementById('ccpt')) {
	var Obj = document.getElementById(ObjId);
	var CCpt = document.createElement('div');
	CCpt.id ='ccpt';
	CCpt.style.position ="absolute";
	CCpt.style.top = Ypos;
	CCpt.style.left = Xpos;
	CCpt.style.width = "200px";
	CCpt.style.height = "200px";
	CCpt.style.backgroundColor ="#FFFF99";
	CCpt.style.border ="solid #DDDDDD";
	CCpt.innerHTML = Obj.value;
	CCpt.style.visibility ="visible";
	document.body.appendChild(CCpt);
 }
}
function HideComment(ObjId) {
	if(document.getElementById('ccpt')) {
		document.body.removeChild('ccpt');
	}
}
</script>
</head>
<body>
<div id="tt">
<input type="text" id="inpt1" value="ligne1">
TEST<TEXTAREA id="txt1" style="height:20px" COLS="50" onfocus="ChangeArea(this.id,0);" onblur="ChangeArea(this.id,1);" onMouseOver="ShowComment(this.id,event);" onMouseOut="HideComment(this.id);">
 
</textarea>
</div>
</body>
</html>

**SPACHFR** · 27/05/2009, 10h27

J'ai fini par trouver, en cherchant dans le forum.
Je ne comprend pas trop la syntaxe mais �a fonctionne.

j'ai mis ce code en ligne 38

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById('ccpt').parentNode.removeChild(document.getElementById('ccpt'))

Merci � tous ceux qui m'ont aid�

**SpaceFrog** · 27/05/2009, 10h27

ta variable objet n'est pas globale, elle n'a donc de prot�e qu'au sein de la fonction et pas entre les fonctions ...

**franculo_caoulene** · 27/05/2009, 10h33

Il faut supprimer le noeud, tu lui donne simplement l'identifiant du div, ligne 39

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.body.removeChild(document.getElementById("ccpt"));

**SPACHFR** · 27/05/2009, 11h55

Merci pour ces pr�cisions

Une derni�re requ�te, j'arrive pas � trouver un tuto sur ces m�thodes.
Si vous avez un lien je suis preneur.

**franculo_caoulene** · 27/05/2009, 12h02

Pas de tuto, mais une doc plut�t bien expliqu�e https://developer.mozilla.org/en/Gec...ment_Reference, pas exemple pour element.removeChild(). Ou bien Sitepoint qui donne aussi les compatibilit� entre navigateurs.

Supprimer un DIV dynamiquement

JavaScript

Discussions similaires

Partager

Partager