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

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

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

Supprimer un DIV dynamiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager