在JavaScript中删除第一个子元素

Question

我正在尝试使用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]，这似乎有点奇怪，因为我只期望得到对象。

希望我表述清楚了。

- user1248084

Answer 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. 

- Alex

---

第一个子元素是带有换行符的文本。使用这行代码，您只能获取“li”元素。 - Alex

谢谢，解决了！:) dystroy 给出了描述。 - user1248084

我的意思是，如果你提供解释，而不仅仅是一段代码片段，人们更有可能给你的答案点赞。 - DanMan

Answer 2

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

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

- Felix Kling

---

@Locercus 不是，这是原生的。只需使用 document.getElementById('queue').children[0]。 - Asad Saeeduddin

不是这样的... jQuery 也有一个 .children 方法，但那不是我要说的。 - Felix Kling

Answer 3

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

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

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

- kennebec

Answer 4

你可以使用这一行代码。它将永远删除父元素的第一个子元素。

JavaScript:

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

HTML：

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

- Vasu Kuncham

---

我认为最简单的解决方案 - ii iml0sto1

Answer 5

子节点不仅仅是你所想的元素，还包括文本节点。你可以遍历这些节点并删除第一个 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;
   }
}

演示

请注意，这更像是一种解释而不是最实用的解决方案。Javascript有其他迭代解决方案，其中包括getElementsByTagName，因此您可以执行以下操作：

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

Demonstration

- Denys Séguret

---

你能给我一个例子吗？ - user1248084

记录一下，我看到在我的编辑之前，Alex提到了getElementsByTagName。 - Denys Séguret