必须按两次键才能使用EventListener (javascript)
必须按两次键才能使用EventListener (javascript)
提问于 2018-08-12 05:27:51
我正在用javascript做一些DOM操作(我知道还有其他更快的方法，我只是想先学习老方法！)
我创建了这个EventListener：
document.addEventListener("keydown", delitem);..and以下函数：
function delitem(evt) {
if (evt.keyCode == 46) {
ul.removeChild(ul.lastChild);
}
}希望当我在网页上的任何地方按下“删除”键时，列表中的最后一项将被删除。然而，我必须按两次“删除”键才能正常工作，我不知道为什么会发生这种情况？
如果我在列表中添加了一个新项目，那么我可以按一次'delete‘来删除它。但对于现有的项目，它必须按两次。感谢你的帮助。
下面是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>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-12 05:34:54
lastChild返回元素内的最后一个节点，该节点是一个文本节点，因为在行尾有一个被解释为文本的换行符：
</li>\n</ul>由于您希望获取最后一个元素，而不是最后一个节点，因此可以使用lastElementChild，或者只需删除换行符：
</li></ul>Stack Overflow用户
发布于 2018-08-12 05:33:14
这是完整的代码，它应该可以工作
<!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>Stack Overflow用户
发布于 2018-08-12 05:45:17
您可以对最后一个元素使用lastElementChild或query。
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);
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51803885
复制相关文章
相似问题