Supprimer des éléments du DOM

Version imprimable

bonjour,
j'ai une fonction javascript qui affiche une table lorsque l'on clique sur un bouton

Citation:

<div id="button_addtitles" onclick="show_titles(numero,'login')">Afficher les titres</div>

l'affichage de la table se passe très bien, et je supprime alors ce bouton afficher pour mettre un bouton "Masquer les titres" mon div devient donc

Citation:

<div id="button_close_titles" onclick="close_titles(numero)">Masquer les titres</div>

le problème c'est que lorsqu'on cliquer sur "masquer les titres" plus rien ne se passe

voici le détail de la fonction pour masquer les titres : close_titles(num)
Code:

1 2 3 4 5 6 7 8 function close_titles(num) { alert("ça fonctionne à ce niveau"); tbody_titles = "tbody"+num; var eltn = document.getElementById(tbody_titles); while(eltn.hasChildNodes()) eltn.removeChild(eltn.firstChild); }
j'ai mis un "alert" pour voir si cette fonction javascript s'exécutait bien, mais déjà il ne m'affiche même pas le message d'alerte javascript, donc j'imagine que la suite ne peut pas s'exécuter

quelqu'un a une idée ? je me casse la tete la-dessus depuis plusieurs jours ?

j'utilise Firefox

Merci si quelqu'un peut m'aider

01/05/2011, 17h34
NoSmoking

Bonjour,
il ne suffit d'écrire onclick="..." pour qu'il soit pris en compte...
Montres nous comment tu crées ton nouveau bouton.

Mais plutôt que de supprimer et créer un bouton différent pourquoi ne pas masquer/afficher suivant le cas avec la propriété display du style de l'objet...
:faq:
01/05/2011, 19h54
sekaijin
comme le dit NoSmoking
utilise un display block ou non pour montrer ou cacher test titres c'est beaucoup moins coûteux que de créer supprimer.

en suite sur ton tableau tu mets les titres dans un thead
et non dans le tbody
ainsi il te suffit de changer la classe du thead pour montrer cacher les titres

et c'est plus conforme HTML

je pense que ton pb vient de la variable

Code:

<div id="button_close_titles" onclick="close_titles(numero)">Masquer les titres</div>

ce code est équivalent à ceci

Code:

<div id="button_close_titles" >Masquer les titres</div>

et
Code:

1 2 3 document.getElementById('').onclick=function () { close_titles(numero); }
lorsque tu mets onclick dans ta balise le navigateur créé un fonction anonyme comme le code ci dessus

lorsque tu clique sur ton bouton c'est cette fonction qui est invoquée
tu vois donc que cette fonction en s'exécutant va tombé sur la ligne

Code:

close_titles(numero);

l'interprète javascript évalue la variable numero si celle-ci n'existe pas l'interprète lève une exception et arrête l'exécution de la fonction anonyme.
la fonction close_titles n'est pas appelée

A+JYT
02/05/2011, 17h35
Bovino
Citation:

Envoyé par sekaijin

l'interprète javascript évalue la variable numero si celle-ci n'existe pas l'interprète lève une exception et arrête l'exécution de la fonction anonyme.

A noter que ce n'est pas le cas pour les propriétés d'objets non définies ;)
Code:

1 2 alert(window.toto); // => 'undefined' alert(toto); // Erreur levée et script stoppé
02/05/2011, 18h36
aztec

merci pour vos éléments de réponse ; je vais retester tout cela et surtout essayer d'utiliser les display block qui effectivement seront plus simples

je rebondis sur le commentaire de sekaijin car je veux quand même réussir à programmer jusqu'au bout en suppression/creation pour voir si je peux faire fonctionner une fonction en dynamique

j'ai vérifié avec Firebug que logiquement au moment ou il est censé executer ma variable close_titles(numero), la variable numero existe bien, mais peut-être dois-je indiquer window.numero à la place de numéro ?

je vous ai indiqué ci-dessous le code exact de mes deux fonctions show_titles et close_titles

Code:

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
function show_titles(num_alb,log_session)
{
 if (num_alb!=0) {
 var tablesel_titles = get_select_xml('media_disco_titles','numero','Num_album',num_alb);
 text_div_show_titles = "show_titles"+num_alb;
 var div_show_titles = document.getElementById(text_div_show_titles);
 
 if (tablesel_titles!=0){
    div_show_titles.appendChild(CreateTableArraySimple(tablesel_titles,num_alb,log_session));
    text_button_add_titles = "button_add_titles"+num_alb;
    var elt = document.getElementById(text_button_add_titles);
    elt.parentNode.removeChild(elt);
 
    var button_close_titles = document.createElement('div');
    text_button_close_titles = "button_close_titles"+num_alb;
    button_close_titles.setAttribute("id",text_button_close_titles);
	button_close_titles.setAttribute("title","Cliquez pour masquer");
	text_parametres = "close_s_titles(" + num_alb + ")";
    button_close_titles.setAttribute("onclick",text_parametres); // pour firefox
    button_close_titles.onclick=text_parametres; // pour IE
	button_close_titles.setAttribute("style","cursor:pointer;");   
    text_parent_button_add_titles = "parent_button_add_titles"+num_alb;
    var parent_button_add_titles = document.getElementById(text_parent_button_add_titles);
    var text_masquer_titles = document.createTextNode("Masquer les titres");
    button_close_titles.appendChild(text_masquer_titles);
    parent_button_add_titles.appendChild(button_close_titles);
 }
  else {alert("Aucun titre saisi pour cet album!");}
 }

Code:

1
2
3
4
5
6
7
function close_s_titles(num_alb)
{
	tbody_titles = "tbody"+num_alb;
    var eltn = document.getElementById(tbody_titles);
    while(eltn.hasChildNodes())
    eltn.removeChild(eltn.firstChild);
    }

tu peux faire directement

Code:

1
2
3
4
5
6
7
  button_close_titles.id    = "button_close_titles" +num_alb;
  button_close_titles.title = "Cliquez pour masquer";
  button_close_titles.style.cursor = "pointer;";
 
  button_close_titles.onclick = function(){
    close_s_titles ( num_alb);
  };