JavaScript 删除数组[i]——在 OSX 中运行良好，但在 Windows 中无法运行？

Question

我正在用普通 JavaScript 构建一个列表生成器应用程序，它可以在我的 MacBook 上运行，但不能在我的 PC 上运行。

我缺少 Mac 和 PC 之间的什么区别？

有问题的具体错误是值没有从 Windows 中的数组中删除。我没有从 Windows 收到 Chrome 或 Firefox 控制台错误，但“删除”函数并未从数组中删除值。相反，它从 HTML 中删除 LI，但每当创建新条目并重新绘制无序列表时，目标数组值的 LI 就会重新出现。

我已经在我的 Mac 和 PC 上通过 Firefox 和 Chrome 运行了代码，并更新了浏览器。

我正在尝试的功能是允许用户通过向数组添加值来在 DOM 上创建 LI，然后通过单击 LI 来删除此 LI 和数组值。

我的 HTML:

    <div>
        <h2>Enter your Input!</h2><input class="feedback-input" id=
        "entryBox" placeholder="Type anything!" type="text"> <button id=
        "addEntry" onclick="addEntry()">Add your Entry</button>
    </div>

    <div id="outputBox">
        <ul id="outputList"></ul>

        <p>Click list item to remove</p>
    </div>
</div>

我的 JavaScript:

var output = document.getElementById("outputList");
var list = [];
var entry = {};

function addEntry() {
  input = document.getElementById("entryBox").value; //Reads value from form
  document.getElementById("entryBox").value = ""; //Clears entry box for new text
  list.push(input);
  while (outputList.firstChild) //clearing the old displayed list 
  {
    outputList.removeChild(outputList.firstChild);
  }

  for (i = 0; i < list.length; i++) //For loop to draw LIs in unordered list
  {
    var li = document.createElement('li'); //Creates li
    output.appendChild(li); //attaches li to the output list
    li.onclick = function() //provides list items removal function
    {

      function remove() {
        delete list[i]; //pulls it out of the array. Delete prefered to Splice so I can maintain original location of other array items.
        console.log(list);
      }
      remove();
      this.parentNode.removeChild(this); //pulls it out of the DOM
    };

    li.innerHTML = li.innerHTML + list[i]; //adds the entryBox value to the li
  }
}

我还将代码放在 JSFiddle 中； Fiddle 中的 JS 根本不起作用，但我不想将其分散到 JSFiddle 类(class)中。 https://jsfiddle.net/y3sjs7po/

Answer 1

document.getElementById("outputList"); 将返回 null，因为该元素在页面加载之前不存在，因此您的脚本将失败。

这有效:https://jsfiddle.net/y3sjs7po/1/ (加载在body之后)

但是，您在循环中也做错了。您无法在这样的闭包中捕获 i 的状态。当 onclick 事件触发时，i 始终是数组中的最后一个元素。另外，this 并不引用事件来源的元素 - 您必须将其传入。最后，在这种情况下，使用 splice() 来删除元素，而不是 删除。

试试这个:https://jsfiddle.net/y3sjs7po/4/

我将其更改为存储包含每个存储项目详细信息的对象项目。由于删除项目时索引会发生变化，因此您无法存储索引并期望项目位于相同位置。为此，我更改了这一行:

list.push({
    input: input,
    li: null
});

它将输入值和列表元素存储在一个对象中，以便跟踪和稍后删除。

var li = document.createElement('li'); //Creates li
list[i].li = li;

使其工作的部分是这样的:

li.onclick = (function (item) {
    return function () // creates a closure over the local `item` variable in the parent scope
    {
        // ... find the item's position (changes as items are deleted) ...
        for (var i = 0; i < list.length; ++i)
            if (list[i] == item) {
                list.splice(i, 1); //pulls it out of the array
                item.li.parentNode.removeChild(item.li); //pulls it out of the DOM
                break;
            }
        console.log(list);
    };
})(list[i]); // pass in the current item

它正确将每个项目(输入和元素)包装在闭包中(通过将其传递到包装函数中)。这也可以使用 bind() 来完成功能也一样。