Supprimer des champs en javascript

Bonjour
J'ai le formulaire en pièce jointe dont les données sont rempli depuis la base de données.
J'aimerais pouvoir supprimer chaque ligne en cliquant sur le petit bouton vert à droite. Je n'y arrive pas. Quelqu'un peut-il m'aider ? Merci d'avance
Voici le partie du formulaire :

<fieldset>
            <legend><i class="fas fa-edit" style="color:#57B223"></i>&nbsp Contenu de la facture formation</legend>
            <?php foreach ($resFC as $req): ?>
            <div id="ID_container">
              <textarea name="designation[]" rows="4"
                 placeholder="Designation" required><?php echo $req['designation'] ?></textarea>
              <input type="number" placeholder="Quantité" name="quantite[]" value="<?php echo $req['quantite'] ?>" >
              <input type="number" step="0.01" placeholder="Prix HT" name="prixht[]" value="<?php echo $req['prixht'] ?>" >
              <input name="taxe[]" type="text" step="0.01" placeholder="Taxe en %" value="<?php echo $req['taxe'] ?>" >
              <button type="button" class="supprimer" onclick="suppression(this)">x</button>
            </div>
            <?php endforeach; ?>
            <br/>
            <button type="button" class="boutonAjout" onclick="ajout(this);">+ Ajouter une designation</button>
         </fieldset>

Voici la fonction suppression:

function suppression(element){
        var container = document.getElementById('ID_container');
        container.removeChild(element.parentNode.parentNode);
      }

Salut

Je vois

<?php foreach ($resFC as $req): ?>

ce qui implique une boucle et donc la création de plusieurs exemplaires de

<div id="ID_container">

alors qu'un ID doit être unique dans la page web.

function suppression(element){
  var container = document.getElementById('ID_container');  // toujours le dernier de la série
  
  container.removeChild(element.parentNode.parentNode);
}

Modifié par danielhagnoul (27 Apr 2018 - 20:07)

J'ai fait ceci et ça ne marche pas toujours :

<div id="ID_container">
              <?php foreach ($resFC as $req): ?>
              <textarea name="designation[]" rows="4"
                 placeholder="Designation" required><?php echo $req['designation'] ?></textarea>
              <input type="number" placeholder="Quantité" name="quantite[]" value="<?php echo $req['quantite'] ?>" >
              <input type="number" step="0.01" placeholder="Prix HT" name="prixht[]" value="<?php echo $req['prixht'] ?>" >
              <input name="taxe[]" type="text" step="0.01" placeholder="Taxe en %" value="<?php echo $req['taxe'] ?>" >
              <button type="button" class="supprimer" onclick="suppression(this);">x</button>
              <?php endforeach; ?>
            </div>

danielhagnoul a écrit :
alors qu'un ID doit être unique dans la page web.

+1

Beurk, le code JS....

Sinon (écrit en ES5) :

window.addEventListener('DOMContentLoaded', function(){
    //Si forEach n'est pas pris en compte, on utlise une méthode de Array. Si Array ne connait pas forEach, utiliser un polyfill 
    //https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
    Array.prototype.slice(document.querySelectorAll('.supprimer'), 0).forEach(function($button){
        $button.addEventListener('click', function(e){
            $container = this.parentNode;
            $container.parentNode.removeChild($container);
            e.preventDefault();
        })
    });
});

(code fait de tête, je peux m'être trompé. C'est une bonne piste à suivre)


Attention, ce code n'enlève pas la ligne en base.... Il faut procéder différemment ou ajouter du code complémentaire... Aussi, j'ai ajouté preventDefault puisque normalement on fait un peu autrement (la sémantique). C'est un lien et non un bouton (enfin là j'avoue que c'est tendancieux. Mais il faut connaître l'historique de cette manière de faire).
Modifié par niuxe (28 Apr 2018 - 18:10)