Remove first child in javascript

Question

I'm trying to remove the first li in an ol using the DOM removeChild(). But for some reason it doesn't work.

This is my javascript:

document.getElementById('queue').removeChild(
    document.getElementById('queue').childNodes[0]
);

And this is my HTML:

<ol id="queue">
    <li>Surprised Kitty (Original)<span class="nodisplay">0Bmhjf0rKe8</span></li></ol>

I tried alerting the childNodes[0], and it returns [Object Text], which seems a bit weird, when I was expecting just the object.

Hope I've been clear.

Answer 1

Try this one-liner:

document.getElementById('queue').removeChild(document.getElementById('queue').getElementsByTagName('li')[0]);

With expanded explanation:

var queue = document.getElementById('queue'); // Get the list whose id is queue.
var elements = queue.getElementsByTagName('li'); // Get HTMLCollection of elements with the li tag name.
queue.removeChild(elements[0]); // Remove the child from queue that is the first li element.