javascript - 无法使用removeChild删除我的2个INPUT字段

Question

经过多次测试，我找不到如何删除我的 2 个字段 INPUT、文本和数字。

当我单击具有“buttonAdd”类和 createElement 的按钮时，我创建了 3 个字段，该按钮创建了 2 个 INPUT 字段和 1 个 IMG 字段“这是用于删除的图标”。

比如说，当我点击 IMG 图标时，如何删除我的 2 个字段 INPUT“objetInputSuivant”和“poidsInputSuivant”？

我用removeChild和parentElement进行了测试，但我做不到

我删除了测试以正确发布代码

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>

Answer 1

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

parentElement.removeChild()正确的方法是:

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>

并且(仅供引用)，看在上帝的份上，stop using inline HTML event handlers ，将 HTML 与 JavaScript 分开，并使用 .addEventListener() 遵循现代标准.