Détruire/supprimer une area

**Kalseln** · 01/03/2008, 16h37

Bonjour,

Je cherche désespérément la syntaxe pour détruire ou supprimer ou effacer de la page une area.

**julien.63** · 01/03/2008, 17h12

salut,
je ne sais pas vraiment ce que tu appelles une area.
Mais pour cacher un élément d'une page tu peux utiliser

Code :

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

tonElement.style.display ="none";

ou

Code :

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

tonElement.style.visibility="hidden";

**Kalseln** · 01/03/2008, 17h34

Une <area...> c'est une zone définie par des positions et qui doit faire partie d'une balise <map...> qui elle même fait référence à une image. Utile pour faire des zones cliquables d'autres formes que carrées. Voici une de mes zones octogonales :

Code :

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

<area shape="poly" coords="336,194,383,188,419,205,406,229,359,235,324,218" />

Ce que j'essaie de faire c'est un "onclick" qui commence par enlever la possibilité de recliquer sur la même zone ou une autre zone. Donc j'avais pensé à supprimer carrément la zone ou enlever le href des zones mais je ne trouve pas comment faire.

J'ai essayé par exemple

Code :

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

this.delete();

ça ne fait rien.

Je viens d'essayer

Code :

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

this.style.display ="none";

ça ne marche pas non plus.

**Auteur** · 01/03/2008, 18h20

display et visibility sont des attributs pour afficher ou cacher un élement.

Le mieux est de supprimer le noeud en utilisant removeChild().

**Kalseln** · 02/03/2008, 13h52

ça m'a l'air d'être une bonne piste, merci pour vos réponses au fait.
Mais est-ce que tu pourrais me donner un exemple de suppression d'une div par exemple ? ou si tu connais un site qui en parle ...
Je n'arrive à trouver que des exemples avec removeChild() de suppression d'éléments dans un "select".

Edit:
Non c'est bon j'ai trouvé comment ça marche. Exemple avec des divs :

Code :

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

1
2
3
4
5
<div id="b">
  <div id="a" style="left:100px;top:100px;height:50px;width:50px;background-color:blue;"></div>
</div>
 
<a href="#" onclick="document.getElementById('b').removeChild(document.getElementById('a'));">Supprimer la zone</a>

Il ne me reste plus qu'à adapter pour mes area (que je génère grâce à 4 boucles for...)

**Auteur** · 02/03/2008, 19h31

supprime ton area comme tu supprimes ton div

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function supprArea()
{
    var noeudAera = document.getElementById("idPoly");
    document.getElementById("ImageMap").removeChild(noeudAera);
}
//-->
</script>
 
</head>
 
<body>
 
<img src="map.jpg" style="width:200px; height:200px; border: none" usemap="#map" />
 
<map id="ImageMap" name="map">
    <area shape="rect" coords="21,20,48,104" alt="Rectangle" href="http://www.page.htm" />
    <area shape="circle" coords="45,162,27" alt="Cercle" href="http://www.page.htm" />
    <area id="idPoly" shape="poly" coords="78,68,77,61,114,48,114,141,132,141,132,146,83,146,84,138,100,139,101,58" alt="Polygone" href="http://www.page.htm" />
</map>
 
<br />
<input type="button" value="Bouton" id="idButton" onclick="supprArea()" />
 
 
</body>
 
</html>

Après le clic sur le bouton, l'area polygone n'existe plus

Petite parenthèse : les options du select ne sont pas supprimées avec removeChild(). L'objet select possède ses propres fonctions d'ajout et suppression des options

**Kalseln** · 03/03/2008, 00h28

C'est bon ça fonctionne.

Merci bien.

Pour les select je n'ai pas vraiment regardé quand j'ai vu que c'était compliqué, je saurai si j'en ai besoin un jour.

**Auteur** · 03/03/2008, 12h02

un exemple d'ajout et de suppression des options dans un select (il n'y a rien de compliqué)

:

Code html :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function addItem()
{
 /*op = new Option("Text","Value",false,false);
 alert(op.text+" "+op.value); */
 
 
 var combo = document.getElementById("combo");
 var Valeur = document.getElementById("idAjValeur").value;
 var Texte = document.getElementById("idAjTexte").value;
 var Pos = document.getElementById("idAjPos").value;
 
 if (parseInt(Pos).toString()==Number.NaN.toString())
    Pos = "0";
 
 
 var op = new Option(Texte, Valeur,false,false);
 combo.options.add(op,Pos);
 
}
 
function removeItem()
{
  var posSuppr = document.getElementById("idSupprPos").value;
  var combo = document.getElementById("combo");
  combo.remove(posSuppr);
 
}
//-->
</script>
 
</head>
 
<body>
<h3>Ajout d'une option :</h3>
Valeur :
<input type="text" value="Valeur" id="idAjValeur" size="20" maxlength="10">(Sans espace)
<br>
Option :
<input type="text" value="NomOption" id="idAjTexte" size="20" maxlength="10">
<br>
Index :
<input type="text" value="0" id="idAjPos" size="20" maxlength="10">(Laiser vide pour ajout en haut de liste)<br>
<br>
<input type="button" value="Ajouter" onclick="addItem()"><br><br><br>
 
<h3>Suppression d'une option :</h3>
Index : <input type="text" value="0" id="idSupprPos" size="10" maxlength="5">
<input type="button" value="Enlever" onclick="removeItem()">
 
<br><br>
 
 
<!-- Il faut au moins une option dans le select pour que la page soit valide W3C -->
<select size="10" id="combo">
<option value="defaut">Valeur par défaut</option>
</select>
 
 
 
</body>
 
</html>

Une remarque :
Pour que la page passe la validation W3C, il faut ajouter le doctype, mais surtout il faut que le select possède au moins 1 option.

Détruire/supprimer une area

JavaScript

Discussions similaires

Partager

Partager