Question

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

Answer 1

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

 </li>\n</ul>

当您要获取最后一个元素而不是最后一个节点时，可以使用lastElementChild代替，也可以只删除换行符：

 </li></ul>

Answer 2

这是完整的代码，它应该可以工作

<!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>

Answer 3

您可以使用lastElementChild或查询最后一个元素。

https://codepen.io/anon/pen/WKPgjg

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);
    }
  });
});

必须为EventListener（javascript）按下两次键

3 个答案: