我正在制作一个 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 索引的原因可能是什么?如何修复?
最佳答案
当您执行此操作时:$(".delete").click(...
...您正在向执行该代码时存在的每个删除按钮添加一个 click
回调,包括已经存在的删除按钮存在,而不仅仅是您刚刚创建的单个删除按钮。
例如,添加三个项目后,第一个项目的删除按钮将有三个点击回调,第二个将有两个点击回调,第三个将有一个。
当你删除第一个项目时,它会顺利删除一次,然后两次会给你-1错误,因为它已经删除了自己,不会被发现。
我想如果你像这样改变代码:
$(deleteButton).click(...
...这应该可以解决问题。
关于javascript - 从列表( li 元素)中删除项目,给出索引 -1。 JavaScript(Chrome 扩展),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61543889/