Question

我正在尝试使用DOM li删除ol中的第一个removeChild()。但由于某种原因，它不起作用。

这是我的javascript：

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

这是我的HTML：

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

我尝试提醒childNodes[0]，当我期待对象时，它会返回[Object Text]，这看起来有点奇怪。

希望我一直很清楚。

Answer 1

<ol id="queue">和<li>标记之间是空格和换行符。这些组成了一个文本节点。因此，#queue元素的第一个子节点是文本节点。

您可以使用.children属性而不是.childNodes，它只考虑元素节点，或迭代所有子节点，直到找到第一个li节点，如{{3} }。

Answer 2

试试这个单行：

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

扩展说明：

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.

Answer 3

子节点不仅是您考虑的元素，还包括文本节点。您可以遍历节点并删除第一个LI。

var p = document.getElementById('queue');
for (var i=0; i<p.childNodes.length; i++) {
   if (p.childNodes[i].tagName=='LI') {
       p.removeChild(p.childNodes[i]);
       break;
   }
}

Demonstration

请注意，这比最实用的解决方案更具解释性。 Javascript还有其他迭代解决方案，其中包括getElementsByTagName，所以你可以这样做：

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

Demonstration

Answer 4

删除队列中包含的所有列表：

var list=document.getElementById('queue');

list.removeChild(list.getElementsByTagName('li')[0]);

在javascript中删除第一个孩子

4 个答案: