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 :

Suppression d'un élément ajouté dynamiquement


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 3
    Par défaut Suppression d'un élément ajouté dynamiquement
    Bonjour,

    J'ai fais un script permettant d'ajouter dynamiquement un élément à un formulaire et de le supprimer à l'aide d'un bouton.

    Cela donne quelque chose comme ça :

    Element [Supprimer]
    Element [Supprimer]
    [Ajouter]


    Voici le code HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <div id="parentDiv">
    	<h2>Quel modèle de PC possédez-vous ?</h2>
    	<p id="dynForm">
    		<input type="text" value="1" name="nomPC"  /> 
    		<button name="Supprimer" onclick="suppr()">Supprimer</button>
    	</p>
    	<button name="Ajouter" onclick="ajout()">Ajouter </button> <br/>
    	<input type="submit" value="Valider"/>
    </div>
    Et voici le code Javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    function ajout(){
    		parentDiv = document.getElementById("parentDiv");
    		dynForm = document.getElementById("dynForm");
    		clown = dynForm.cloneNode(true);
    		parentDiv.insertBefore(clown, dynForm);
    	}
     
    	function suppr(){
    		parentDiv = document.getElementById("parentDiv");
    		child = document.getElementById("dynForm");
    		parentDiv.removeChild(child);
    	}

    Lorsqu'on clique sur ajouter, l'élément avec son bouton est bien créé.
    Par contre, le problème se pose à la suppression d'un élément.
    Comment faire comprendre au script que c'est bien l'élément sur lequel on clique que l'on veut supprimer.
    Alors qu'actuellement dans mon code, c'est toujours le premier élément qui est supprimé.

    Merci à toutes les bonnes volontés !

  2. #2
    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 : 54
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ben là, tu ajoutes à chaque fois des éléments avec le même id, ce qui n'est pas autorisé, donc getElementById ne pourra pas bien fonctionner...
    De plus :
    Comment faire comprendre au script que c'est bien l'élément sur lequel on clique que l'on veut supprimer.
    Euh... l'élément sur lequel tu cliques, c'est le bouton !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Invité
    Invité(e)
    Par défaut
    si je comprend bien tu veut supprimer sa

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <p id="dynForm">
    		<input type="text" value="1" name="nomPC"  /> 
    		<button name="Supprimer" onclick="suppr()">Supprimer</button>
    	</p>
    utilise le this
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    onclick="suppr(this)">Supprimer</button>
    et dans la fonction il faut faire reference au parent du bouton qui fera lui meme appel a son parent

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function suppr(lui){
     
    var parent_du bouton=lui.parentNode
    parent_du bouton.parentNode.removeChild(parent_du bouton);
    	}

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    a priori, si on considère que les champs ne sont pas vraiment "ordonnés" ni "organisés", tu peux te contenter de supprimer le dernier (??)

    ce qui donne ça: http://javatwist.imingo.net/ajouform.php

  5. #5
    Futur Membre du Club
    Inscrit en
    Janvier 2011
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 3
    Par défaut
    Citation Envoyé par mekal Voir le message
    si je comprend bien tu veut supprimer sa

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <p id="dynForm">
    		<input type="text" value="1" name="nomPC"  /> 
    		<button name="Supprimer" onclick="suppr()">Supprimer</button>
    	</p>
    utilise le this
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    onclick="suppr(this)">Supprimer</button>
    et dans la fonction il faut faire reference au parent du bouton qui fera lui meme appel a son parent

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function suppr(lui){
     
    var parent_du bouton=lui.parentNode
    parent_du bouton.parentNode.removeChild(parent_du bouton);
    	}
    Merci MEKAL tas solution fonctionne. Il fallait donc utiliser le THIS.
    Problème résolu !

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

Discussions similaires

  1. [TinyMCE] Activation sur nouveaux éléments ajoutés dynamiquement
    Par Recif dans le forum Bibliothèques & Frameworks
    Réponses: 0
    Dernier message: 11/06/2013, 14h08
  2. Réponses: 5
    Dernier message: 05/12/2012, 11h50
  3. Positionnement d'un élément ajouté dynamiquement
    Par katoyi dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 22/08/2010, 00h10
  4. Réponses: 4
    Dernier message: 30/07/2010, 09h27
  5. Ajout dynamique de fonction à un élément (js non intrusif)
    Par waldo2188 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/11/2007, 13h20

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