標題：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" />