6

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

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

希望我已经清楚了。

4

5 回答 5

12

试试这个单行：

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.
于 2013-01-12T15:00:24.593 回答
7

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

您可以使用该.children属性而不是.childNodes，它只考虑元素节点，或者遍历所有子节点，直到找到第一个li节点，如dystroy 建议的那样。

于 2013-01-12T14:59:35.790 回答
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;
   }
}

示范

请注意，这更像是一种解释，而不是最实用的解决方案。Javascript 为您提供其他迭代解决方案，其中包括getElementsByTagName，因此您可以这样做：

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

示范

于 2013-01-12T14:58:33.367 回答
3

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

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

list.removeChild(list.getElementsByTagName('li')[0]);
于 2013-01-12T15:02:20.347 回答
0

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

JavaScript：

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

HTML：

<ol id="queue">
    <li>
        Surprised Kitty (Original)
        <span class="nodisplay">0Bmhjf0rKe8</span>
    </li>
</ol>
于 2021-11-25T06:25:46.540 回答