IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Supprimer des éléments du DOM


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Inscrit en
    Janvier 2003
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Janvier 2003
    Messages : 120
    Points : 64
    Points
    64
    Par défaut Supprimer des éléments du DOM
    bonjour,
    j'ai une fonction javascript qui affiche une table lorsque l'on clique sur un bouton
    <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
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 057
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 057
    Points : 44 589
    Points
    44 589
    Par défaut
    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...

  3. #3
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="button_close_titles" onclick="close_titles(numero)">Masquer les titres</div>
    ce code est équivalent à ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="button_close_titles" >Masquer les titres</div>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    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

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    alert(window.toto);    // => 'undefined'
    alert(toto);    // Erreur levée et script stoppé

  5. #5
    Membre du Club
    Homme Profil pro
    Inscrit en
    Janvier 2003
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Janvier 2003
    Messages : 120
    Points : 64
    Points
    64
    Par défaut
    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

  6. #6
    Membre du Club
    Homme Profil pro
    Inscrit en
    Janvier 2003
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Janvier 2003
    Messages : 120
    Points : 64
    Points
    64
    Par défaut
    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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
        }

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 057
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 057
    Points : 44 589
    Points
    44 589
    Par défaut
    tu peux faire directement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
      };

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM]Supprimer des éléments d'une page HTML
    Par witch dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 05/02/2009, 16h37
  2. Supprimer des éléments d'une liste
    Par espadon1 dans le forum Langage
    Réponses: 2
    Dernier message: 31/05/2006, 15h08
  3. Réponses: 7
    Dernier message: 16/05/2006, 15h40
  4. Supprimer des éléments dans une TreeView ?
    Par souch dans le forum Composants VCL
    Réponses: 4
    Dernier message: 16/09/2005, 12h20
  5. Supprimé des éléments vide d'un tableau
    Par shinux2004 dans le forum Langage
    Réponses: 4
    Dernier message: 04/07/2005, 19h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo