如何使用onclick函数删除数组中的项

How to remove an item in an array using an onclick function?

本文关键字：数组 删除 何使用 onclick 函数      更新时间：2023-09-26

在此代码中，我试图将项推入数组，然后将其删除。如下图所示，create按钮将为我提供一个空白输入和一个将其存储到数组中的按钮。将其推入数组后，视图按钮将遍历数组并显示其旁边带有"编辑"answers"删除"按钮的所有项。这就是我的问题所在……对于放入数组中的每个项目，它将其显示在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 () {
    }
}
}

您需要某种方法来标识要删除的元素，以便将其绑定到delete函数。下面的一些代码展示了使用数据属性的一种可能方法。

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

相关文章：