Masquer les composants d'une div

**new_wave** · 31/01/2017, 09h29

Bonjour,

J'ai crée un bouton zone de texte qui, quand on clique dessus, permet la création d'une zone de texte dans une div nommée "en-dessous".

Or il se trouve qu'auparavant, j'ai cliqué sur un bouton "label" qui, quand on clique dessus , permet l'affichage dans la même div "en-dessous", d'un libellé.

Il se trouve que le libellé reste affiché dans la div "en-dessous" lorsque je clique sur le bouton "zone de texte", ce que je ne souhaite pas.

Pouvez-vous me dire comment faire disparaître ce libellé créé par le click sur le bouton "label" pour que la div "en-dessous" soit "propre" pour faire apparaître seulement une zone de texte .
voici le code de la page html "generateur de formulaire"

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
          
         
      #droite {
        background-color:#CEFFF8;
        height: 300px;
        padding: 10px;
        padding-left: 70%;
                text-align:justify;
      }
          
        #en-dessous {
        background-color:#CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 70%;
                text-align:justify;
      }
          
        #right {
        position: absolute;
        width: 70%;
        border: 2px solid #000000;
                
                }
          
  </style>
  </head>
  <body>
    <div id="gauche">
	<span id="recup_1"></span>
	</div>
 
	<div id="droite">
 
      Utilisez ces boutons pour créer votre formulaire<br><br>
 
 
      <button onclick= "afficher_click_label()" id= "id_bouton_label">Label</button><br><br>
      <button onclick= "afficher_click_zone_texte()" id = "id_bouton_zone_texte">Zone de texte</button><br><br>
      <button onclick= "afficher_click_bouton()"id="id_bouton" >Bouton</button><br><br>
 
	</div>
 
	<div id="en-dessous">
 
	</div>
 
	<script src= "jquery.js"></script>
	<script src="fonctions_js_generateur_formulaire.js"></script>
	<!--ajout d'une bibliothèque de gestion des espaces -->
	<script src="jquery.empty-or-whitespace.js"></script>
  </body>
</html>

Voici le code de la fonction afficher_click_zone_texte() à laquelle je souhaiterais ajouter au tout debut du code pour annuler l'affichage précédent, résultat de l'appel
afficher_click_label()

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
function afficher_click_zone_texte(){
 
 
	//création d'un nouvel element hr
	var nouvelle_ligne = document.createElement("hr");
 
	//on pointe vers la div à laquelle on souhaite ajouter la ligne+ ajout
	document.getElementById("en-dessous").appendChild(nouvelle_ligne);
	nouvelle_ligne.id = "right_2";
 
	//creation de deux lignes et ajout de ces lignes à la div "en-dessous"
	var balise_br_3 = document.createElement('br');
	var balise_br_4 = document.createElement('br');
	document.getElementById("en-dessous").appendChild(balise_br_3);
	document.getElementById("en-dessous").appendChild(balise_br_4);
 
	//creation du texte "Texte du label"
	var texte= document.createTextNode("id_zone_de_texte"+"\u0020");
 
	//ajout de ce texte à la balise en-dessous
	document.getElementById("en-dessous").appendChild(texte);
 
	//ajout d'un espace entre Texte "id_zone_de_texte" et la zone de saisie
	var espace_blanc_3 = document.createTextNode("\u00a0" );
	document.getElementById("en-dessous").appendChild(espace_blanc_3);
 
	//creation d'une zone de saisie 
	var saisie_texte_2 = document.createElement("input");
	saisie_texte_2.type ="text";
 
	//affectation d'un id à la zone de saisie saisie_texte
	saisie_texte_2.setAttribute("id", "id_saisie_texte_2");
 
	//ajout à la div "en-dessous"
	document.getElementById("en-dessous").appendChild(saisie_texte_2);
 
	//creation d'un bouton 
	var bouton_ok_ZT = document.createElement("BUTTON");
 
	//ajout d'un attribut id au bouton crée
	bouton_ok_ZT.setAttribute("id","id_bouton_ok_ZT");
 
	//creation du texte du bouton
	var texte = document.createTextNode("OK");
 
	//ajout du texte au bouton
	bouton_ok_ZT.appendChild(texte);
 
	//ajout d'un espace entre la zone de texte et le bouton OK
	var espace_blanc_4 = document.createTextNode("\u00a0" );
	document.getElementById("en-dessous").appendChild(espace_blanc_4);
 
	//ajout du bouton à la div "en-dessous"
	document.getElementById("en-dessous").appendChild(bouton_ok_ZT);
 
	//declenchement de la fonction afficher_texte_div_gauche après un click sur le bouton bouton_ok_label
	document.getElementById("id_bouton_ok_ZT").onclick = afficher_ZT_texte_div_gauche;
 
 
	//ajout de deux sauts de ligne
	//creation de deux lignes et ajout de ces lignes à la div "recup_texte_btn_ok"
	var balise_br_5 = document.createElement('br');
	var balise_br_6 = document.createElement('br');
	document.getElementById("recup_1").appendChild(balise_br_5);
	document.getElementById("recup_1").appendChild(balise_br_6);
 
	//ajout d'une  nouvelle span	
	var nouvel_element_span=document.createElement('span');
	//affectation d'un id à la zone de saisie saisie_texte
	nouvel_element_span.setAttribute("id", "recup_2");
 
	var div_gauche=document.getElementById("gauche");
 
	div_gauche.insertAfter(nouvel_element_span);
 
 
}//fin de fonction afficher_click_zone_texte