Tajuk: JavaScript untuk mengalih keluar elemen anak terbaharu mengikut ID mempunyai kesan terhad

Question

Saya sedang membuat senarai dinamik di mana pengguna boleh mengklik butang untuk mengalih keluar input. Apabila mencipta input baharu, saya memberikan ID kepada elemen anak menggunakan pembilang yang ditambah 1 setiap kali input baharu dijana. Walau bagaimanapun, apabila saya cuba memadamkan input mengikut ID, nampaknya hanya input yang paling baru dibuat boleh dipadam.

Saya perasan bahawa jika anda menjana 5 input baharu dan kemudian klik butang padam pada input:2, input dan butang ke-5 akan dipadamkan. Jadi, walaupun saya menetapkan input dan ID butang lebih awal dalam proses, mengklik butang padam hanya bergantung pada nilai semasa pembilang baris.

Bolehkah seseorang memberi saya beberapa petunjuk tentang cara menunjuk ke ID lama? Atau adakah saya perlu menulis semula dengan cara yang berbeza? Saya sangat baru dengan JS, jadi saya memohon maaf jika ini adalah skrip JS yang mengerikan!

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 itu, atau hanya hantar elemen ke fungsi penyingkiran anda, yang juga akan melangkau carian.

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

Setiap kali anda menambah elemen baharu, 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" />