您好，我有一个简单的无序列表，我想通过单击按钮删除最后一项。我在某处读到 pop();会这样做，但我无法让它正常工作。
这是我目前所拥有的:
<button id="remove">remove item</button>
<ul id="list">
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
</ul>
var listItems = document.getElementById("list").getElementsByTagName("li");
var removeButton = document.getElementById("remove");
removeButton.addEventListener("click", removeItem);
function removeItem() {
listItems.pop();
}
这是我遇到的错误:
未捕获的类型错误:listItems.pop 不是 HTMLButtonElement.removeItem 中的函数
这很奇怪，因为当我在控制台中键入 listItems 时，我得到了正确的数组:
列表项
(7) [li, li, li, li, li, li, li]
jsfiddle
有人有什么建议吗？我不需要使用 .pop() 任何有效的方法都可以
pop 是一个数组函数。您必须像这样删除列表项:
function removeItem() {
var last = listItems[listItems.length - 1];
last.parentNode.removeChild(last);
}
注意 1:我们不需要递减 listItems.length，因为它是一个实时的 HTMLCollection(由 getElementsByTagName 返回)反射(reflect)DOM(如果一个元素从 DOM 中移除，那么它会自动从集合中移除)。
注意 2:您可能需要在尝试删除最后一项(如果为空则不存在)之前检查集合是否为空。查看下面的示例以查看操作方法。
示例:
var listItems = document.getElementById("list").getElementsByTagName("li");
var removeButton = document.getElementById("remove");
removeButton.addEventListener("click", removeItem);
function removeItem() {
if(listItems.length === 0) return; // if there is no items in listItems then quit the function (don't attempt to remove what doesn't exist)
var last = listItems[listItems.length - 1];
last.parentNode.removeChild(last);
}
<button id="remove">remove item</button>
<ul id="list">
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
<li><input type="text"></li>
</ul>