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 input baharu dibuat, saya memberikan ID kepada elemen anak menggunakan pembilang, yang dinaikkan sebanyak 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 perhatikan 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 memberikannya kepada saya

P粉311464935 · Answer

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()
}

P粉605233764 · Answer

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();
}