从列表中删除项目（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按钮上。

一种更好的方法是对它们全部使用单个委托事件处理程序。还要注意，您可以通过使用jQuery使代码更简洁，因为您已经在页面中对其进行了引用。试试这个：

function addItem(value) { 
  $(textList).append(`<li><p>${value}</p><button class="delete"></button></li>`);
}

jQuery($ => {
  $(textList).on('click', '.delete', function() {
    let $button = $(this);
    removeItem($button.index('.delete'));
    $button.closest('li').remove();
  });
});

Answer 2

[执行此操作时：$(".delete").click(...

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

例如，添加三项后，第一项的删除按钮将具有三个click回调，第二项将具有两个click回调，而第三个将具有一个。

[删除第一项时，它会平滑地删除一次，然后两次给出-1错误，因为它已被删除，因此无法找到。

我想如果您像这样更改代码：

$(deleteButton).click(...

...应该解决问题。