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

Question

这是两个按钮。一种是“appendChild”，一种是“Remove Child”。

List ----之前---------- --

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(); 来解决删除问题，而不是使用 onclick 事件，按照 @TJ-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 上，您' d需要在父级上使用 removeChild
• EventTarget .addEventListener()

Answer 2

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

您可以使用 list.children[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>