标题：JavaScript 通过 ID 删除最新子元素的元素效果有限

Question

我正在制作一个动态列表，用户可以在其中单击按钮来删除输入。创建新输入时，我使用计数器为子元素分配一个 ID，每次生成新输入时计数器都会加 1。但是，当我尝试通过 ID 删除输入时，似乎只有最新创建的输入是可删除的。

我注意到，如果您生成 5 个新输入，然后单击 input:2 上的删除按钮，则会删除第 5 个输入和按钮。因此，即使我在此过程的早期设置了输入和按钮 ID，单击删除按钮也仅依赖于行计数器的当前值。

有人可以给我一些关于如何指向旧 ID 的指示吗？或者我是否需要以完全不同的方式重写它？我对 JS 很陌生，所以如果这是可怕的 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 它，或者只是将元素传递给您的删除函数，这也会跳过查找。

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