javascript - 必须为EventListener(javascript)按下两次键

我正在用JavaScript做一些DOM操作(我知道还有其他更快的方法，我只是想先学习旧方法!)

我创建了这个EventListener:

document.addEventListener("keydown", delitem);

..以及以下功能:

function delitem(evt) {
if (evt.keyCode == 46) {
ul.removeChild(ul.lastChild);
  }
}

希望当我在网页上的任何位置按“删除”键时，列表中的最后一项将被删除。但是，我必须按两次“删除”键才能使它起作用，而且我不知道为什么会这样？

如果我将新项目添加到列表中，则可以按一次“删除”将其删除..但是对于现有项目，必须按两次。
感谢您的帮助。

这是HTML:

<ul class="list-group ">
<li class="list-group-item list-group-item-info ">Notebook</li>
<li class="list-group-item list-group-item-info ">Peas</li>
<li class="list-group-item list-group-item-info ">Spinach</li>
<li class="list-group-item list-group-item-info ">Rice</li>
<li class="list-group-item list-group-item-info ">Birthday Cake</li>
<li class="list-group-item list-group-item-info ">Candles</li>
</ul>

最佳答案

lastChild返回元素内的最后一个节点，并且该节点是一个textnode，因为您在该行的末尾获得了换行符，该行被解释为文本:

 </li>\n</ul>

当您要获取最后一个元素而不是最后一个节点时，可以改用lastElementChild或删除换行符:

 </li></ul>