Не могу удалить мои 2 поля ввода с помощью removeChild - PullRequest
Новая
       17

Не могу удалить мои 2 поля ввода с помощью removeChild

0 голосов
/ 27 марта 2019

После нескольких тестов, я не могу найти, как удалить мои 2 поля INPUT, текст и число.

Я создал 3 поля, когда я нажимал на мою кнопку, которая имеет класс "buttonAdd" с createElement, которыйсоздает 2 поля INPUT и 1 поле IMG ", которое является значком для удаленных".

Скажите, как удалить мои 2 поля INPUT "objetInputSuivant" и "poidsInputSuivant", когда я нажимаю на свой значок IMG?

Я тестировал с помощью 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>

1 Ответ

1 голос
/ 27 марта 2019

Скажите, как удалить мои 2 поля INPUT "objetInputSuivant" и "poidsInputSuivant", когда я нажимаю на значок IMG?

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>

И (FYI), ради любви к Богу, прекратите использовать встроенные обработчики событий HTML , отделите свой HTML-код от JavaScript и следуйте современным стандартам, используя .addEventListener().

...