从Javascript数组中删除项目并显示新数组

Question

这个简单的代码允许我显示数组中的项目列表，并从数组中删除所选项目，最后显示没有删除项目的新列表。

var carBrands = ["Toyota", "Honda", "BMW", "Lexus", "Mercedes","Peugeot","Aston   Martin","Rolls Royce"];
var html="";
var newList="";
var itemToRemove;

$(document).ready (function () {
console.log("Ready to go!");
$("#displayList").bind('click', function(event) {
    displayList();
   });
$("#removeItem").bind('click', function(event) {
    item = document.getElementById("input").value;
    removeItemFromList(item);
});
 });
function displayList() {
for (var i = 0; i < carBrands.length; i++) {
    html+= "<li>" + carBrands[i] + "</li>";
    document.getElementById("list").innerHTML=html;
}

}
function removeItemFromList(item) {
itemToRemove = item;

for (var i=0; i<carBrands.length; i++) {
    if (itemToRemove == carBrands[i]) {
        carBrands.splice(carBrands[i], 1);
    }
    newList+= "<li>" + carBrands[i] + "</li>";
    document.getElementById("newList").innerHTML=newList;
}
}

第一次尝试时效果很好，

但如果我再试一次，新列表会附加到旧列表中，我最初删除的项目也会添加到其中。

我的问题：

1. 如何在没有删除项目的情况下显示列表？
2. 是html和newList个对象吗？

Answer 1

首先，splice()不希望您删除的事物，它需要事物的索引。

所以，而不是：

carBrands.splice(carBrands[i], 1);

你想要：

carBrands.splice(i, 1);

删除 last 项后，您永远不会清空newList，因此您只需将所有内容重新添加到列表中。

请改为尝试：

function removeItemFromList(item) {
  itemToRemove = item;

  for (var i=0; i < carBrands.length; i++) {
    if (item == carBrands[i]) {
      carBrands.splice(i, 1);
      break;
    }
  }

  newList = "<li>" + carBrands.join('</li><li>') + "</li>";  
  document.getElementById("newList").innerHTML = newList;
}

另外，您会注意到循环中从不需要itemToRemove;如果您不在其他地方使用它，它可能会消失。

Answer 2

您的问题与变量范围有关：html和newList变量在每次运行函数时都保留其值（也就是：每次按下按钮时）。

您也遇到了严重的性能问题。循环时，您不希望在每次迭代时更新DOM，并且您希望根据需要更新DOM。

不要这样做：

var html = "";
function displayList() {
    html = "";
    for (var i = 0; i < carBrands.length; i++) {
        html += "<li>" + carBrands[i] + "</li>";
        document.getElementById("list").innerHTML = html;
    }    
}

执行：

function displayList() {
    var html = "";
    for (var i = 0; i < carBrands.length; i++) {
        html += "<li>" + carBrands[i] + "</li>";
    }
    document.getElementById("list").innerHTML = html;
}

以下是解决方案的问题：http://jsfiddle.net/netinept/jmm93fy1/

完整的JavaScript（包括用于构建最终列表的Paul Roub的连接解决方​​案）：

var carBrands = ["Toyota", "Honda", "BMW", "Lexus", "Mercedes", "Peugeot", "Aston Martin", "Rolls Royce"];


var itemToRemove;

$(document).ready(function () {
    console.log("Ready to go!");
    $("#displayList").bind('click', function (event) {
        displayList();
    });
    $("#removeItem").bind('click', function (event) {
        item = document.getElementById("input").value;
        removeItemFromList(item);
    });
});

function displayList() {
    var html = "";
    for (var i = 0; i < carBrands.length; i++) {
        html += "<li>" + carBrands[i] + "</li>";
    }
    document.getElementById("list").innerHTML = html;
}

function removeItemFromList(item) {
    itemToRemove = item;
    for (var i = 0; i < carBrands.length; i++) {
        if (itemToRemove == carBrands[i]) {
            carBrands.splice(i, 1);
            break;
        }
    }
    var newList = "<li>" + carBrands.join('</li><li>') + "</li>";
    document.getElementById("newList").innerHTML = newList;
}