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 returns 所有节点，包括存在于您的 <ul> 中的空文本节点。使用 .lastElementChild 来定位您的 <li> 节点

The difference between this property and lastElementChild, is that lastChild returns the last child node as an element node, a text node or a comment node (depending on which one's last), while lastElementChild returns the last child node as an element node (ignores text and comment nodes).

有关详细信息，请参阅 HTML DOM lastChild Property and 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">

关于为什么会发生这种情况的更多详细信息...当您使用干净的间距格式化标记时，我认为 "phantom" 文本节点静静地存在于您的 <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

的缩小标记示例

Answer 2

变化：

item = list.lastChild;

至

item = list.lastElementChild;

JS：删除 lastChild 仅在每秒单击一次按钮时起作用

JS: remove lastChild only works every second button click

javascript

html

dom

removechild