Javascript 如何仅删除阵列的当前实例，而不是阵列的所有实例？

如何仅删除阵列的当前实例，而不是阵列的所有实例

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

---

}

可能绑定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

---

像这样的东西应该可以正常工作抱歉，盲编码，现在没有时间测试了

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

---

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

最终工作代码，谢谢

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

}

看看loopsArray.indexOfpersons[l]；？的闭包内部？这应该做什么？否则，如果showAllButton.value=Hide，联系人将不会将值与字符串文字进行比较，而是分配值。

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

}