javascript - 如何使用 onclick 函数删除数组中的项目？

Question

在这段代码中，我试图将项目插入数组，然后删除它们。如果您在下面看到，创建按钮将给我一个空白输入和一个将其存储到数组中的按钮。插入数组后， View 按钮遍历数组并显示旁边带有“编辑”和“删除”按钮的所有项。这就是我的问题所在......对于放入数组的每个项目，它都将其显示在 Html 上并有自己的按钮。单击特定删除按钮时如何从数组中删除该项目？

//variables
var create = document.getElementById("create");
var view = document.getElementById("view");
var display = document.getElementById("display");
var text = document.getElementById("text");
var push = document.getElementById("push");
var arr1 = [];

//create button
create.onclick = function () {
    text.style.display = "inline";
    push.style.display = "inline";
}
//push button
push.onclick = function () {
    arr1.push(text.value);
    push.dataset.u_index;
    console.log(arr1);
    text.value = "";
}
//view button
view.onclick = function () {

for (var i = 0; i < arr1.length; i++) {
    var disp = document.createElement("div");
    disp.innerHTML = arr1[i];
    display.appendChild(disp);
    var edit = document.createElement("button");
    var edit_t = document.createTextNode("Edit");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    var del = document.createElement("button");
    var del_t = document.createTextNode("Delete");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    disp.appendChild(del);
    del.appendChild(del_t);
}
//del button
del.onclick = function () {

    }

}
}

Answer 1

您需要一些方法来识别要删除的元素，以便将其绑定(bind)到删除功能。下面是一些代码，展示了一种使用数据属性的可能方式。

//variables
var create = document.getElementById("create");
var view = document.getElementById("view");
var display = document.getElementById("display");
var text = document.getElementById("text");
var push = document.getElementById("push");
var results = document.getElementById("results");
var arr1 = [];

//create button
create.onclick = function() {
  text.style.display = "inline";
  push.style.display = "inline";
}

//push button
push.onclick = function() {
  arr1.push(text.value);
  push.dataset.u_index;
  console.log(arr1);
  text.value = "";
}

//view button
view.onclick = function() {
  for (var i = 0; i < arr1.length; i++) {
    var disp = document.createElement("div");
    disp.innerHTML = arr1[i];
    results.appendChild(disp);
    var edit = document.createElement("button");
    var edit_t = document.createTextNode("Edit");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    var del = document.createElement("button");
    var del_t = document.createTextNode("Delete");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    disp.appendChild(del);
    del.appendChild(del_t);
    del.setAttribute('data-item-index', i);

    //set onclick fn for del button
    del.onclick = function() {
      var itemIndex = this.getAttribute('data-item-index');
      arr1.splice(itemIndex, 1);
      console.log(arr1);
      results.innerHTML = '';
      view.click();
    };
  }
}

<div id='display'>
  <button id="create">Create</button>
  <div>
    <input type="text" id='text'>
    <button id='push'>Push</button>
  </div>
  <button id='view'>View</button>
  <div id='results'></div>
</div>