从列表中删除项（li元素），给出索引-1。Javascript（Chrome扩展）

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

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

在函数中添加alert后，我看到，当首先单击任何delete按钮时，将发出预期索引的警报，在某些情况下，-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索引的原因可能是什么？如何修复它？

执行此操作时：$.delete。单击

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

例如，添加三个项目后，第一个项目的delete按钮将有三个click回调，第二个项目将有两个click回调，第三个项目将有一个click回调

当您删除第一个项目时，它将平滑地删除一次，然后两次给您-1错误，因为它已经删除了自己并且找不到

我想如果你像这样修改代码：

$deleteButton。单击

…这应该可以解决问题。

执行此操作时：$。删除。单击

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

例如，添加三个项目后，第一个项目的delete按钮将有三个click回调，第二个项目将有两个click回调，第三个项目将有一个click回调

当您删除第一个项目时，它将平滑地删除一次，然后两次给您-1错误，因为它已经删除了自己并且找不到

我想如果你像这样修改代码：

$deleteButton。单击

---

…这应该可以解决问题。

问题是因为每次添加新行时都要将多个事件处理程序附加到现有的.delete按钮

一种更好的方法是对所有这些事件使用单个委托事件处理程序。还要注意，使用jQuery可以使代码更加简洁，因为页面中已经有了对它的引用。试试这个：

函数addItemvalue{ $textList.append`${value}

`； } jQuery$=>{ $textList.on'click'，'delete'，函数{ 让$button=$this； 删除项$button.index'.delete'； $button.最近的'li'。删除； }; };

---

问题是因为每次添加新行时都要将多个事件处理程序附加到现有的.delete按钮

一种更好的方法是对所有这些事件使用单个委托事件处理程序。还要注意，使用jQuery可以使代码更加简洁，因为页面中已经有了对它的引用。试试这个：

函数addItemvalue{ $textList.append`${value}

`； } jQuery$=>{ $textList.on'click'，'delete'，函数{ 让$button=$this； 删除项$button.index'.delete'； $button.最近的'li'。删除； }; };

---

它确实解决了这个问题。确切地说，我有时会看到-1在案例中多次弹出。它确实解决了问题。确切地说，我有时会看到-1在案例中多次弹出。