El elemento de nodo se elimina solo la segunda vez, y los creados con la función de agregar se eliminan la primera vez.
function move(o) { var parent = o.parentNode; parent.removeChild(o); parent.insertBefore(o, parent.firstChild); } function add() { var node = document.createElement('li'); var textnode = document.createTextNode("new"); node.appendChild(textnode); node.setAttribute("onclick", "move(this)"); document.getElementById("table").appendChild(node); id = "myList" } function del() { o = document.getElementById("table"); o.removeChild(o.firstChild); } <ol id='table'> <li onclick="move(this)">1</li> <li onclick="move(this)">2</li> <li onclick="move(this)">3</li> <li onclick="move(this)">4</li> <li onclick="move(this)">5</li> <li onclick="move(this)">6</li> </ol> <button onclick="add()">Append</button> <button onclick="del()">Del</button>tienes que usar
o.removeChild(o.firstElementChild);en su función del().
Así que este es el código actualizado:
<ol id="table"> <li onclick="move(this)">1</li> <li onclick="move(this)">2</li> <li onclick="move(this)">3</li> <li onclick="move(this)">4</li> <li onclick="move(this)">5</li> <li onclick="move(this)">6</li> </ol> <button onclick="add()">Append</button> <button onclick="del()">Del</button> <script> function move(o) { var parent = o.parentNode; parent.removeChild(o); parent.insertBefore(o, parent.firstChild); } function add() { var node = document.createElement("li"); var textnode = document.createTextNode("new"); node.appendChild(textnode); node.setAttribute("onclick", "move(this)"); document.getElementById("table").appendChild(node); id = "myList"; } function del() { o = document.getElementById("table"); o.removeChild(o.firstElementChild); } </script>El firstChild no es un LI sino un nodo de texto
Usar
o.removeChild(o.firstElementChild);También delega el clic
const table = document.getElementById("table") table.addEventListener("click",function(e) { const tgt = e.target; if (tgt.tagName==="LI") { move(tgt); } }) function move(o) { var parent = o.parentNode; parent.removeChild(o); parent.insertBefore(o, parent.firstElementChild); } function add() { var node = document.createElement('li'); var textnode = document.createTextNode("new"); node.appendChild(textnode); table.appendChild(node); } function del() { table.removeChild(table.firstElementChild); } <ol id='table'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> <button onclick="add()">Append</button> <button onclick="del()">Del</button>