HTMLCollection { length: 0 } 与一个现有元素。儿童无法访问[0] [已关闭]

Question

我有问题。使用 HTMLCollection。

我正在编写菜单和多级子菜单。从 JSON 解析结构。

<ul class="categories">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

当我点击

menu 1

时，我的 JS 代码会在 JSON 数据的 li 元素内添加子菜单。看起来像：

<ul class="categories">
    <li>menu 1
    <ul>
        <li>submenu 11</li>
        <li>submenu 12</li>
        <li>submenu 13</li>
    </ul>
    </li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

当用户点击

menu 2

时，我的JS代码必须在第一个li元素中找到ul并从

menu 1

中删除ul 我正在尝试从每个 li 元素中找到 ul 元素。我有查找和删除子节点的功能。

// Function for remove another submenu
function removeChildSubmenu(element) {
    //console.log(element)

    for (var item of element.children) {
        console.log(item.children)
    }
}

问题是：

item.children

是

HTMLCollection { length: 0 }

与现有元素。当我使用

item.children[0]

时，它会给出

undefined

。

如何解决问题或如何用另一种方式编写脚本（不要分享简单的方法。JSON 的数据很大！）？

Answer 1

如果您需要将子级作为数组而不是集合，那么可以像展平/映射集合一样简单。如果使用集合，您可能只需要使用 *.item(i) 而不是 {} 或 []:

document.body.children.item(i) === [...document.body.children][i];

然后迭代子数组/列表项元素。

[...<ul>.children].forEach(li, (li) => {
    if (li <condition>) {
         <ul>.removeChild(li);
    }
})