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

Question

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

当我点击带有 class "buttonAdd" 和 createElement 的按钮时，我创建了 3 个字段，这创建了 2 个字段 INPUT 和 1 个字段 IMG "which is the icon for deleted".

请问，当我点击我的 IMG 图标时，如何删除我的 2 个字段 INPUT "objetInputSuivant" 和 "poidsInputSuivant"？

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

我删除了对 post 代码的测试

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, separate your HTML from your JavaScript, and follow modern standards by using .addEventListener()。

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

Can not delete my 2 INPUT fields with removeChild

javascript

forms

removechild