Titel: JavaScript zum Entfernen des neuesten untergeordneten Elements nach ID hat nur begrenzte Wirkung

Question

Ich erstelle eine dynamische Liste, in der der Benutzer auf eine Schaltfläche klicken kann, um eine Eingabe zu entfernen. Beim Erstellen einer neuen Eingabe weise ich dem untergeordneten Element mithilfe eines Zählers eine ID zu, die jedes Mal um 1 erhöht wird, wenn eine neue Eingabe generiert wird. Wenn ich jedoch versuche, eine Eingabe anhand der ID zu löschen, scheint es, dass nur die zuletzt erstellte Eingabe löschbar ist.

Mir ist aufgefallen, dass, wenn Sie 5 neue Eingaben generieren und dann auf die Schaltfläche „Löschen“ bei Eingabe:2 klicken, die 5. Eingabe und die Schaltfläche gelöscht werden. Auch wenn ich die Eingabe- und Schaltflächen-ID zu einem früheren Zeitpunkt im Prozess festgelegt habe, basiert das Klicken auf die Schaltfläche „Löschen“ nur auf dem aktuellen Wert des Zeilenzählers.

Kann mir jemand Tipps geben, wie ich auf die alte ID verweisen kann? Oder muss ich es ganz anders umschreiben? Ich bin sehr neu in JS, daher entschuldige ich mich, wenn dies ein schreckliches JS-Skript ist!

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 它，或者只是将元素传递给您的删除函数，这也会跳过查找。

//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

每次添加新元素时，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" />