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>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:
removeChild on the parent insteadYou 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>