如何使用onclick函数从数组中删除一个项目？

Question

在这段代码中，我试图将项目推入数组，然后再删除它们。 如果您看下面，创建按钮将为我提供一个空输入和一个将其存储到数组中的按钮。在它被推入数组之后，查看按钮会浏览数组并显示所有带有“编辑”和“删除”按钮的项目。这就是我的问题所在...对于放入数组的每个项目，它都会在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 () {

    }

}
}

- Jason

Answer 1

你需要一种方法来识别要删除的元素，以便将其与删除函数关联起来。以下是使用数据属性显示一种可能方式的代码。

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

- Adam