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 Property和HTML DOM lastElementChild Property

＆＃13;

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

＆＃13;

<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">

＆＃13;

关于为什么会发生这种情况的更多细节...当你用干净的间距格式化你的标记时，我认为是＆＃34;幻像＆＃34;文本节点默默存在于<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

的minifed标记示例

Answer 2

更改：

item = list.lastChild;

到

item = list.lastElementChild;

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

2 个答案: