JavaScript通过ID移除元素仅对最新子元素生效的问题求助

你遇到的核心问题是全局变量row的绑定问题：当给每个移除按钮绑定onclick事件时，事件函数并没有立刻执行，而是等你点击按钮时才触发。此时row已经被多次递增到最新值，所以所有按钮的点击事件都会用当前的row值，而非创建该按钮时的数值——这就是为什么点击旧按钮会删掉最新生成的输入框。

下面提供三种实用解决方案，从易到难适配不同需求：

方案一：用立即执行函数保存当前row值 #

通过立即执行函数（IIFE）把创建按钮时的row值“固定”下来，避免后续row变化影响事件函数：

var row = 1;

function addFields() {
  row++;
  var currentRow = row; // 保存当前row值，避免后续被覆盖

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

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

  var button = document.createElement("button");
  button.id = "button_" + currentRow;
  button.type = "button";
  button.innerText = "Remove";
  // 用IIFE形成闭包，把currentRow的值传递给事件函数
  button.onclick = (function(rowNum) {
    return function() {
      remove_field("button_" + rowNum, "input_" + rowNum);
    }
  })(currentRow);
  
  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();
}

方案二：直接关联DOM元素，无需ID查找 #

更简洁的方式是让按钮直接“记住”对应的输入框，省去ID管理的麻烦：

var row = 1;

function addFields() {
  row++;

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

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

  var button = document.createElement("button");
  button.type = "button";
  button.innerText = "Remove";
  // 事件函数直接引用当前创建的input和button，无需通过ID查找
  button.onclick = function() {
    input.remove();
    button.remove();
  }
  
  container.appendChild(button);
}

这个方案可以直接删掉remove_field函数，代码更精简。

方案三：用容器包裹每组元素，移除时删除整个容器 #

把每个输入框和按钮放在独立的容器（如div）中，点击按钮时直接删除父容器，逻辑最清晰：

var row = 1;

function addFields() {
  row++;

  var container = document.getElementById("container");
  // 创建分组容器，包裹当前组的输入框和按钮
  var group = document.createElement("div");

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

  var button = document.createElement("button");
  button.type = "button";
  button.innerText = "Remove";
  button.onclick = function() {
    group.remove(); // 一键删除整个分组
  }
  
  group.appendChild(button);
  container.appendChild(group);
}

这种方式后期扩展性最好，若要给每组添加其他元素，直接往group里追加即可。

内容的提问来源于stack exchange，提问作者user8188120