Question

在这段代码中，我试图将项目推入数组然后删除它们。如果您在下面看到，创建按钮将为我提供一个空白输入和一个将其存储到数组中的按钮。将其推入数组后，视图按钮将通过数组并显示所有项目，并显示按钮＆＃34;编辑＆＃34;和＆＃34;删除＆＃34;在它旁边。这就是我的问题所在......对于放入数组的每个项目，它在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

您需要某种方法来识别要删除的元素，以便它可以与删除功能绑定。这里有一些代码显示了使用数据属性的一种可能方式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: