必须为EventListener（javascript）按两次键_Javascript_Event Listener

必须为EventListener（javascript）按两次键

javascript

必须为EventListener（javascript）按两次键,javascript,event-listener,Javascript,Event Listener,我正在用javascript进行一些DOM操作（我知道还有其他更快的方法，我只是想先学习旧方法！）我创建了这个EventListener： document.addEventListener("keydown", delitem); ..以及以下功能： function delitem(evt) { if (evt.keyCode == 46) { ul.removeChild(ul.lastChild); } } 希望当我在网页的任何地方按“删除”键时，列表中的最后一项都会被删除。但

我正在用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>


笔记本电脑
PEA
菠菜
Rice
生日蛋糕

这是完整的代码，应该可以使用

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<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>
<script>
document.addEventListener("keydown", delitem);
var ul = document.querySelector('ul');
function delitem(evt) {
if (evt.keyCode == 46 && ul.children.length ) {
ul.removeChild(ul.lastChild);
  }
}
</script>
</body>
</html>


页面标题

笔记本电脑
PEA
菠菜
Rice
生日蛋糕


文件。添加的文件列表（“键控”，delitem）；
var ul=document.querySelector（'ul'）；
功能数据项（evt）{
if（evt.keyCode==46&&ul.children.length）{
ul.removeChild（ul.lastChild）；
}
}

lastChild

返回元素中的最后一个节点，该节点是textnode，因为在行尾有一个新行，它被解释为文本：

 </li>\n</ul>

您可以使用

lastElementChild

或查询最后一个元素

什么是

ul

。。。尝试在您的“删除项”功能中使用调试器或控制台日志对其进行调试。@gurpret调试将在此处显示什么？@jonaswillms调试将显示与您在回答中指出的相同的内容。在本例中，您可以随时检查其功能返回的lastChild。这种行为在的德语版本中有描述，这也应该在英语版本中明确说明……请链接到文档的英语版本，因为这主要是一个基于英语的网站。

lastElementChild

当然有效，但请注意，没有

\n

 </li></ul>

window.addEventListener('load', () => {
  const ul = document.querySelector('.list-group');

  document.addEventListener('keydown', (ev) => {
    if (ev.keyCode === 8) {
      // query for the last li element to avoid text nodes
      const lastChild = ul.querySelector(':last-child');

      if (lastChild) {
        ul.removeChild(lastChild);        
      }

      // alternatively you could use this
      //https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/lastElementChild
      // ul.removeChild(ul.lastElementChild);
    }
  });
});