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

Question

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

当我点击我的按钮时，我创建了3个字段，其中包含带有createElement的类“buttonAdd”，它创建了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

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

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()遵循现代标准。