Can't use removeChild() to delete the element just appended to list. Can only delete the ones at the beginning

Question

This is two button. One is "appendChild" ,One is "Remove Child".

List ----Before------------

one
two
three
appended
appended

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

After appended two new elements, I want to remove the last one. But when I press the remove button.

List ---After-------------

one
two
(?????????? be deleted)
appended
appended

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

The appended elements are still there. I see many solve this problem with jQuery, but I am totally new. I am wondering if JavaScript has the solution.

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>

Don't use `document.getElementById('list')` inside the click functions if you've already saved it in the variable `list`. — evolutionxbox, Mar 28 '22 at 07:26
Two issues with the code that jump out: 1. You're relying on automatic DOM globals for `apd` in the initial `apd.onclick = /*...*/;`, but then using `getElementById` to look it up later. It's best not to rely on automatic DOM globals at all because of potential conflicts, etc.; use `getElementById` to get the element (just once is fine). 2. You're assigning functions to `onclick`. While that works, in general its best to use [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead. — T.J. Crowder, Mar 28 '22 at 07:32
By `list.children[0]` you are explicitly asking for the first child element. — connexo, Mar 28 '22 at 07:56

score 1 · Answer 1 · edited Mar 28 '22 at 07:51

You can use list.lastElementChild.remove(); for delete problem and instead of onclick event use addEventListener as suggest by @T.J- Crowder into comment like:

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>

Reference:

Element.lastElementChild
Element.remove() - note: not on Internet Explorer, you'd need removeChild on the parent instead
EventTarget.addEventListener()

score 0 · Answer 2 · answered Mar 28 '22 at 09:03

You are deleting the first one and not the last one.

Instead of list.children[0], you can use list.children[list.children.length - 1] which will be the last one.

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>

Can't use removeChild() to delete the element just appended to list. Can only delete the ones at the beginning

2 Answers2