JS:删除lastChild只能每隔一次按钮点击一次

Question

我使用此代码删除<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">

Answer 1

这是因为.lastChild返回所有节点,包括你的节点中存在的空文本节点<ul>.使用.lastElementChild而不是针对你<li>的节点

此属性与lastElementChild之间的区别在于lastChild将最后一个子节点作为元素节点,文本节点或注释节点(取决于哪个节点)返回,而lastElementChild将最后一个子节点作为元素节点返回(忽略文本和评论节点).

有关详细信息,请参阅HTML DOM lastChild属性和HTML DOM lastElementChild属性

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 - 使用的minifed标记示例.lastChild