Can not delete my 2 INPUT fields with removeChild

Question

After several tests, I can not find how to remove my 2 fields INPUT, text and number.

I created 3 fields when I click on my button which has the class "buttonAdd" with createElement, which creates 2 fields INPUT and 1 field IMG "which is the icon for deleted".

Say, how to remove my 2 fields INPUT "objetInputSuivant" and "poidsInputSuivant" when I click on my IMG icon?

I tested with removeChild and with parentElement but I can not do it

I removed my tests to post the code properly

const NewInputCampement = (function() {
  let i = 2;

  return function NewInputCampement() {
    i++;
    if (document.getElementById("AddChampCampement").childNodes.length < 39) {
      let Objet = document.createElement("INPUT");
      let Poids = document.createElement("INPUT");
      let Supprimer = document.createElement("IMG");

      Supprimer.className = "SupprimerStyle";
      Supprimer.src = "assets/img/supprimer.png";
      Supprimer.id = "SupprimerCampement_" + i;
      Supprimer.alt = "supprimer";
      Supprimer.onclick = function() {
        SupprimerChamp();
      } // for IE
      Supprimer.setAttribute('onclick', 'SupprimerChamp();'); // for FF
      document.getElementById("AddChampCampement").appendChild(Supprimer);

      Objet.type = "text";
      Objet.className = "objetInput";
      Objet.placeholder = "OBJET";
      Objet.id = "textCampement_" + i;
      Objet.onkeyup = function() {
        this.value = this.value.toUpperCase();
      }
      Objet.maxLength = 18;
      document.getElementById("AddChampCampement").appendChild(Objet);

      Poids.type = "number";
      Poids.className = "poidsInput";
      Poids.placeholder = "POIDS";
      Poids.name = "valInputCampement";
      Poids.id = "poidsCampement_" + i;
      Poids.onkeypress = function() {
        return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
      }
      Poids.onkeyup = function() {
        TotalCalcul();
        limit(this);
      }
      document.getElementById("AddChampCampement").appendChild(Poids);

    }
  }

})()

<form class="inputBlock">

  <input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
  <input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

  <input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
  <input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

  <div id="AddChampCampement"></div>

  <button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>

  <input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>

Start by fixing your console error. `SupprimerChamp ` does not exist — mplungjan, Mar 27 '19 at 18:46
All browsers will understand `Supprimer.onclick = SupprimerChamp` if the function exists — mplungjan, Mar 27 '19 at 18:47
Better yet, all browsers support `Supprimer.addEventListener("click", SupprimerChamp);` — Scott Marcus, Mar 27 '19 at 18:55
Actually more browsers support onclick than addEventListener ;) — mplungjan, Mar 27 '19 at 19:00
@mplungjan Any browser that has been released in the last 5 years supports `.addEventListener` and beyond that `.addEventListener` does things that `onXyz` can't do. — Scott Marcus, Mar 27 '19 at 19:10
@mplungjan IE 9 came out 8 years ago. I really don't think anyone without a very specific use case has to worry about IE8 any more. — Scott Marcus, Mar 27 '19 at 19:12

Scott Marcus · Accepted Answer · 2019-03-27T19:15:03.790

Say, how to remove my 2 fields INPUT "objetInputSuivant" and "poidsInputSuivant" when I click on my IMG icon?

parentElement.removeChild() is the correct way:

const NewInputCampement = (function() {
  let i = 2;

  return function NewInputCampement() {
    i++;
    if (document.getElementById("AddChampCampement").childNodes.length < 39) {
      let Objet = document.createElement("INPUT");
      let Poids = document.createElement("INPUT");
      let Supprimer = document.createElement("IMG");

      Supprimer.className = "SupprimerStyle";
      Supprimer.src = "assets/img/supprimer.png";
      Supprimer.id = "SupprimerCampement_" + i;
      Supprimer.alt = "supprimer";
      Supprimer.addEventListener("click", function() {    
        // Get parent element of elements to be removed
        let parent = document.getElementById("AddChampCampement");
  
        // Remove each of the children
        parent.removeChild(Objet);
        parent.removeChild(Poids);
        parent.removeChild(this);
      }); 

      document.getElementById("AddChampCampement").appendChild(Supprimer);

      Objet.type = "text";
      Objet.className = "objetInput";
      Objet.placeholder = "OBJET";
      Objet.id = "textCampement_" + i;
      Objet.onkeyup = function() {
        this.value = this.value.toUpperCase();
      }
      Objet.maxLength = 18;
      document.getElementById("AddChampCampement").appendChild(Objet);

      Poids.type = "number";
      Poids.className = "poidsInput";
      Poids.placeholder = "POIDS";
      Poids.name = "valInputCampement";
      Poids.id = "poidsCampement_" + i;
      Poids.onkeypress = function() {
        return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
      }
      Poids.onkeyup = function() {
        TotalCalcul();
        limit(this);
      }
      document.getElementById("AddChampCampement").appendChild(Poids);

    }
  }

})()

<form class="inputBlock">

  <input class="objetInput" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
  <input class="poidsInput" type="number" name="valInputCampement" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

  <input class="objetInputSuivant" type="text" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
  <input class="poidsInputSuivant" type="number" name="valInputCampement" id="poidsCampement_2" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

  <div id="AddChampCampement"></div>

  <button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInputCampement()">AJOUTER UN OBJET</button>

  <input class="totalInput" type="number" id="totalCampement" value="0" readonly>
</form>

And (FYI), for the love of God, stop using inline HTML event handlers, separate your HTML from your JavaScript, and follow modern standards by using .addEventListener().

I am not trying to recreate a button, but to delete the 2 fields IMPUT by clicking on my IMG created: let Supprimer = document.createElement("IMG"); — edoc, Mar 27 '19 at 19:09
@edoc See my updated answer. I'm using your code and showing you exactly how to do what you ask. — Scott Marcus, Mar 27 '19 at 19:10
ha yes exactly! I have not seen the update, it works but remains a detail, it removes the 2 fields INPUT correctly but not the IMG "cross" which is drawn on the same line as the fields — edoc, Mar 27 '19 at 19:13
it's better parent.removeChild(Supprimer); or parent.removeChild(this); — edoc, Mar 27 '19 at 19:17
@edoc They are the same. In this case, `this` refers to the object that was causing the `click` callback to be run, which is the image. — Scott Marcus, Mar 27 '19 at 19:17
@ScottMarcus *"...for the love of God, stop using inline HTML event handlers.."* +1 lol — zer00ne, Mar 27 '19 at 19:18
@edoc You're welcome, don't forget to up vote and mark as "the" answer. — Scott Marcus, Mar 27 '19 at 19:19

Can not delete my 2 INPUT fields with removeChild

1 Answers1