不能使用 removeChild() 删除刚刚附加到列表的元素。只能删除开头的那些

Question

这是两个按钮。一个是">appendChild"，一个是">删除子项">

列表----之前--------------

1. 一个

2. 两个

3. 三个

4. 附加

5. 附加

-----------------------

在添加了两个新元素之后，我想删除最后一个。但当我按下删除按钮时。

列表----在---------------之后

1. 一个

2. 两个

3. (删除(

4. 附加

5. 附加

-----------------------

附加的元素仍然存在。我看到很多人用jQuery解决了这个问题，但我是个新手。我想知道JavaScript是否有解决方案。

apd.onclick = function() {
let apd = document.getElementById('apd')
let node = document.createElement('li')
node.className = 'added'
let textnode = document.createTextNode('this is node content')
node.appendChild(textnode)

document.getElementById('list').appendChild(node)
}
let list = document.getElementById('list')
let rem = document.getElementById('rem')
rem.onclick = function() {
let node = document.createElement('li')

document.getElementById('list').removeChild(list.children[0])
}

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="apd">click me to append child!</button>
<button id="rem">click me to remove child!</button>

Answer 1

您可以使用list.lastElementChild.remove();来删除问题，而不是像@T.J-Crowder建议的那样使用addEventListener来评论：

let list = document.getElementById('list')
let rem = document.getElementById('rem')
let apd = document.getElementById('apd')
apd.addEventListener('click', () => {
let node = document.createElement('li')
let textnode = document.createTextNode('this is node content')
node.className = 'added'  
node.appendChild(textnode)
list.appendChild(node)
});
rem.addEventListener('click', () => {
list.lastElementChild.remove();
//or if you need application for IE use list.removeChild(list.lastElementChild);
});

<ul id="list">
<li>123125151</li>
<li>123125151</li>
<li>123125151</li>
<li>123125151</li>
<li>123125151</li>
</ul>
<button id="apd">click me to append child!</button>
<button id="rem">click me to remove child!</button>

参考：

• Element.lastElementChild
• Element.remove((-注意：不在Internet Explorer上，您需要在父级上使用removeChild
• EventTarget.addEventListener((

Answer 2

您正在删除第一个，而不是最后一个。

您可以使用list.children.length-1]，而不是list.children[0]，它将是最后一个。

apd.onclick = function() {
let apd = document.getElementById('apd')
let node = document.createElement('li')
node.className = 'added'
let textnode = document.createTextNode('this is node content')
node.appendChild(textnode)

document.getElementById('list').appendChild(node)
}
let list = document.getElementById('list')
let rem = document.getElementById('rem')
rem.onclick = function() {
let node = document.createElement('li')

document.getElementById('list').removeChild(list.children[list.children.length - 1])
}

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="apd">click me to append child!</button>
<button id="rem">click me to remove child!</button>