删除javascript中的第一个孩子答案

【问题标题】：Remove first child in javascript删除javascript中的第一个孩子
【发布时间】：2013-01-12 14:57:18
【问题描述】：

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

这是我的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]，这似乎有点奇怪，当我期待这个对象时。

希望我已经说清楚了。

【问题讨论】：

标签： javascript element

【解决方案1】：

试试这个单行：

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.

【讨论】：

第一个子元素是一个带有换行符的文本。使用这行代码，您只能获得 'li' 元素。
谢谢，成功了！ :) dystroy 给出了一个描述这个的答案。
我的意思是，如果您提供解释，人们更有可能支持您的答案。不只是一个代码片段。

【解决方案2】：

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

您可以使用.children 属性代替.childNodes，它只考虑元素节点，或者遍历所有子节点直到找到第一个li 节点，例如suggested by dystroy。

【讨论】：

@Locercus 不，它是本地的。只需使用document.getElementById('queue').children[0]
不，不是...... jQuery 也有一个.children 方法，但这不是我要说的。

【解决方案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

【讨论】：

你能举个例子吗？
作为记录，我看到 Alex 在我编辑之前提到了 getElementsByTagName。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

您可以使用这行代码。这将始终删除父元素的第一个子元素。

JavaScript：

document.querySelector('#queue').firstElementChild.remove();

HTML：

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

【讨论】：