Este es de dos botones. Uno es " appendChild ", uno es " Eliminar niño".
Lista ----Antes------------
una
dos
Tres
adjunto
adjunto
-------------------------
Después de agregar dos elementos nuevos, quiero eliminar el último. Pero cuando presiono el botón de eliminar.
Lista ---Después-------------
una
dos
(?????????? ser borrado)
adjunto
adjunto
-------------------------
Los elementos adjuntos todavía están allí. Veo que muchos resuelven este problema con jQuery, pero yo soy totalmente nuevo. Me pregunto si JavaScript tiene la solución.
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>Puede usar list.lastElementChild.remove(); para eliminar el problema y en lugar del evento onclick, use addEventListener como lo sugiere @TJ- Crowder en un comentario como:
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>Referencia:
removeChild en el padre en su lugarEstás eliminando el primero y no el último.
En lugar de list.children[0], puede usar list.children[list.children.length - 1], que será el último.
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>