如何仅删除数组的当前实例，而不是数组的所有实例？答案

【问题标题】：How do I remove just the current instance of the array, not all instances of the array?如何仅删除数组的当前实例，而不是数组的所有实例？
【发布时间】：2017-08-12 22:07:32
【问题描述】：

如何只删除数组的当前实例，而不是数组的所有实例？

var persons = [];

showAllButton.onclick = function() {

  while (showList.firstChild)showList.removeChild(showList.firstChild);

创建了新的节点实例。

  for (var l in persons) {
    var listNode = document.createElement("LI");
    var btn = document.createElement("BUTTON");
    btn.innerHTML = "Remove";
    showList.appendChild(listNode);
    showList.appendChild(btn);

正确显示推送的实例。

    listNode.innerHTML =
    '<p><b>Full Name:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
    '<p><b>Phone:</b> ' + persons[l].phone + '</p>' +
    '<p><b>Address:</b> ' + persons[l].address + '</p>'
    }

尝试了以下函数的一些变体，但只是清空了数组，或者至少不会返回修改后的数组。

    btn.onclick = function() {
        var index = Array.indexOf(persons[l]);
        persons.splice(index, 1);              
        return persons;
    }



  if (showAllButton.value=="Show Contacts") {
      showAllButton.value = "Hide Contacts";
      showList.style.display = "block";   
  }


  else if (showAllButton.value = "Hide Contacts") {
      showAllButton.value = "Show Contacts";
      showList.style.display = "none";  
  }

}

【问题讨论】：

看看 for 循环中的闭包
Array.indexOf(persons[l]); ?这应该怎么做？
else if (showAllButton.value = "Hide Contacts") 不会将值与字符串文字进行比较，而是分配值。

标签： javascript arrays

【解决方案1】：

可能绑定 l，删除索引 l 处的元素，然后以某种方式重绘 dom。：

btn.onclick = function(l) { //take over the bound l
    persons.splice(l, 1);              
    //some kind of redraw
    showAllButton.click();
}.bind(null,l);//bind l

【讨论】：

【解决方案2】：

这样的事情应该可以按预期工作（抱歉，盲目编码，现在没有时间测试）

var persons = [];
function removePerson(index) {
    persons.splice(index, 1);
    renderList();
}

function clearList() {
    while (showList.firstChild) {
        showList.removeChild(showList.firstChild);
    }
}

function renderItem(person, index) {
    var item = showList.appendChild(document.createElement("LI"));

    var label = item.appendChild(document.createElement("SPAN"));
    label.innerHTML = persons[i];

    var btn = item.appendChild(document.createElement("BUTTON"));
    btn.innerHRML = "Remove";
    btn.onclick = removePerson.bind(null, index);
}

function renderList() {
    clearList();
    persons.forEach(renderItem);
}

不是一种最佳实践，但似乎有效。

【讨论】：

【解决方案3】：

最终的工作代码，谢谢！

showAllButton.onclick = function() {

while (showList.firstChild)showList.removeChild(showList.firstChild);

for (var l in persons) {
var list = showList.appendChild(document.createElement("LI"));
list.innerHTML =
'<p><b>Full Name:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
'<p><b>Phone:</b> ' + persons[l].phone + '</p>' +
'<p><b>Address:</b> ' + persons[l].address + '</p>';

var btn = showList.appendChild(document.createElement("BUTTON"));
btn.innerHTML = "Remove";
btn.onclick = function(l) {
     persons.splice(l, 1);
     showAllButton.click();

}.bind(null,l);

}

【讨论】：