Titre : JavaScript pour supprimer le dernier élément enfant par ID a un effet limité

Question

Je crée une liste dynamique où l'utilisateur peut cliquer sur un bouton pour supprimer une entrée. Lors de la création d'une nouvelle entrée, j'attribue un identifiant à l'élément enfant à l'aide d'un compteur qui est incrémenté de 1 à chaque fois qu'une nouvelle entrée est générée. Cependant, lorsque j'essaie de supprimer une entrée par ID, il semble que seule l'entrée créée la plus récemment puisse être supprimée.

J'ai remarqué que si vous générez 5 nouvelles entrées puis cliquez sur le bouton Supprimer sur input:2, la 5ème entrée et le bouton sont supprimés. Ainsi, même si j'ai défini l'entrée et l'ID du bouton plus tôt dans le processus, cliquer sur le bouton Supprimer ne repose que sur la valeur actuelle du compteur de lignes.

Quelqu'un peut-il me donner quelques conseils sur la façon de pointer vers l'ancienne pièce d'identité ? Ou dois-je le réécrire d’une manière complètement différente ? Je suis très nouveau sur JS, donc je m'excuse s'il s'agit d'un horrible script JS !

var row = 1;

function addFields() {
  row++;

  var container = document.getElementById("container");

  var input = document.createElement("input");
  input.id = "input_" + row
  input.type = "text";
  input.placeholder = "input:" + row;
  container.appendChild(input);

  var button = document.createElement("button");
  button.id = "button_" + row;
  button.type = "button";
  button.innerText = "Remove";
  button.onclick = function() {
    remove_field("button_" + row, "input_" + row);
  }
  container.appendChild(button);
}

function remove_field(button_id, input_id) {
  var elem = document.getElementById(button_id);
  elem.remove();
  var elem = document.getElementById(input_id);
  elem.remove();
}

<input type="text" id="goal" name="goal">
<button type="button" onclick="addFields()">+</button><br>
<div class="container" id="container" />

Answer 1

row 的值在每次迭代时都会发生变化，并且您的点击函数仅考虑它的最后一个值。您可以使用 let 确定其范围，bind, ou transmettez simplement l'élément à votre fonction de suppression, qui ignorera également la recherche.

//REM: Can remove the row with this solution, just left to show you the issue.
var row = 1;

function addFields() {
  row++;

  var container = document.getElementById("container");

  var input = document.createElement("input");
  input.id = "input_" + row
  input.type = "text";
  input.placeholder = "input:" + row;
  container.appendChild(input);

  var button = document.createElement("button");
  button.id = "button_" + row;
  button.type = "button";
  button.innerText = "Remove";
  
  //REM: Binding the elements
  //REM: Alternatively you can bind the current value of row.
  button.onclick = function(buttonElement, inputElement, currentRow){
    console.log('This is the value row would have: ', row);
    console.log('This is the value row had at time of binding: ', currentRow);
    
    //REM: Passing the elements to skip any lookup
    remove_field(buttonElement, inputElement)
  }.bind(button, button, input, row);
  
  container.appendChild(button);
}

//REM: Removes a button-input pair
function remove_field(buttonElement, inputElement){
  buttonElement?.remove();
  inputElement?.remove()
}

<input type="text" id="goal" name="goal">
<button type="button" onclick="addFields()">+</button><br>
<div class="container" id="container" />

Answer 2

Chaque fois que vous ajoutez un nouvel élément, row 的值都会更新，因此不要直接使用 row 来获取 id。直接访问 button.id 和 input.id.

var row = 1;

function addFields() {
  row++;

  var container = document.getElementById("container");

  var input = document.createElement("input");
  input.id = "input_" + row
  input.type = "text";
  input.placeholder = "input:" + row;
  container.appendChild(input);

  var button = document.createElement("button");
  button.id = "button_" + row;
  button.type = "button";
  button.innerText = "Remove";
  button.onclick = function() {
    remove_field(button.id, input.id);
  }
  container.appendChild(button);
}

function remove_field(button_id, input_id) {
  var elem = document.getElementById(button_id);
  elem.remove();
  var elem = document.getElementById(input_id);
  elem.remove();
}

<input type="text" id="goal" name="goal">
<button type="button" onclick="addFields()">+</button><br>
<div class="container" id="container" />