Question

您好我有一个简单的无序列表，我想删除点击按钮的最后一项。我在某处看过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();
}

以下是我遇到的错误：

未捕获的TypeError：listItems.pop不是HTMLButtonElement.removeItem的函数

这很奇怪，因为当我在控制台中输入listItems时，我得到了正确的数组：

时listItems （7）[li，li，li，li，li，li，li]

jsfiddle

有人有什么建议吗？我不需要使用.pop（）任何有效的方法

Answer 1

函数getElementsByTagName返回一个不是数组的HTMLCollection。

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

<button id="remove">remove item</button>

<ul id="list">
    <li><input type="text">1</li>
    <li><input type="text">2</li>
    <li><input type="text">3</li>
    <li><input type="text">4</li>
    <li><input type="text">5</li>
</ul>


<script>


var removeButton = document.getElementById("remove");

removeButton.addEventListener("click", removeItem);

function removeItem() {
    var list=document.getElementById("list");
    var listItems = list.getElementsByTagName("li");

    var last=listItems[listItems.length-1];
    list.removeChild(last);
}

</script>

Answer 2

pop是一个数组函数。您必须删除列表项，如下所示：

function removeItem() {
    var last = listItems[listItems.length - 1];
    last.parentNode.removeChild(last);
}

注1：我们不需要递减listItems.length，因为它是反映DOM的实时HTMLCollection（由getElementsByTagName返回）（如果从DOM中删除一个元素，然后从集合中自动删除它。

注2：您可能想要在尝试删除最后一个项目之前检查该集合是否为空（如果该项目为空，则该项目不会存在）。检查下面的示例，看看如何。

示例：

＆＃13;
＆＃13;
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); }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

使用javascript删除列表的最后一项

2 个答案: