javascript - JS:删除lastChild仅在单击第二个按钮时起作用

我使用此代码删除<ul>列表的最后一项，但仅在第二，第四，第六个……上，每单击一次按钮，该项目将被删除一次，但每次单击都会显示该消息。我该怎么做，该元素在每次点击时都会被删除。

document.getElementsByTagName('input')[0].onclick = function () {
    'use strict';
    var list = document.getElementById('list'), item = list.lastChild;
    list.removeChild(item);
    window.alert("Removed");
};

<ul id="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li id="child">List item 4</li>
    <li>List item 5</li>
</ul>
<input type="button" value="Delete last">

最佳答案

这是因为.lastChild返回所有节点，包括<ul>中存在的空文本节点。改用.lastElementChild定位您的<li>节点



有关更多信息，请参见HTML DOM lastChild Property和HTML DOM lastElementChild Property。

document.getElementsByTagName('input')[0].onclick = function () {
    var list = document.getElementById('list'), item = list.lastElementChild;
    list.removeChild(item);
};

<ul id="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li id="child">List item 4</li>
    <li>List item 5</li>
</ul>
<input type="button" value="Delete last">

有关发生这种情况的更多详细信息...当您以干净的间距设置标记格式时，在<ul>中，我所谓的“虚拟”文本节点默默存在。如果您将此标记缩小到以下内容，那么第一个示例确实可以正常工作

<ul id="list"><li>List item 1</li><li>List item 2</li><li>List item 3</li><li id="child">List item 4</li><li>List item 5</li></ul>

Plunker Link-使用.lastChild的最小化标记示例