javascript - 从列表( li 元素)中删除项目，给出索引 -1。 JavaScript(Chrome 扩展)

Question

我正在制作一个 Chrome 扩展，其中我在列表中添加一个项目，并且它有一个用于删除该项目的按钮。它按预期执行其功能，但在扩展面板中给出错误。

Uncaught TypeError: Cannot read property 'style' of null
For line :                 li.style.display = "none";

在函数中添加警报后，我发现当首先单击任何删除按钮时，预期的索引会收到警报，在某些情况下，还会收到 -1 警报。

添加项目并具有删除功能的代码:

  function addItem(value){
    var li = document.createElement("LI");          
    var para = document.createElement("P");    
    var deleteButton = document.createElement("BUTTON");                   // Create a <p> node
    var t = document.createTextNode(value);      // Create a text node

    deleteButton.className = "delete";

    para.appendChild(t); 
    li.appendChild(para);
    li.appendChild(deleteButton);
    textList.appendChild(li); 

    $(".delete").click(function () {
                var index = $(this).index(".delete");
                alert(index); //This alert sometimes gives -1 
                var li = this.parentElement;
                li.style.display = "none";
                removeItem(index);  //This function just removes it from chrome local storage
                $(".delete").eq(index).remove();
            })
    }

未发布的代码只是初始化列表并在单击按钮时添加项目。触发此 -1 索引的原因可能是什么？如何修复？

Answer 1

当您执行此操作时:$(".delete").click(...

...您正在向执行该代码时存在的每个删除按钮添加一个 click 回调，包括已经存在的删除按钮存在，而不仅仅是您刚刚创建的单个删除按钮。

例如，添加三个项目后，第一个项目的删除按钮将有三个点击回调，第二个将有两个点击回调，第三个将有一个。

当你删除第一个项目时，它会顺利删除一次，然后两次会给你-1错误，因为它已经删除了自己，不会被发现。

我想如果你像这样改变代码:

$(deleteButton).click(...

...这应该可以解决问题。