I have issue. With HTMLCollection.

I’m writing menu and multiple level submenu. Parsing structure from JSON.

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

When I click on menu 1, my JS code add submenu inside li element from JSON data. It looks like:

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

When user click on menu 2, my JS code must find ul inside first li element and delete ul from menu 1
I’m trying find <ul element from every li elements. I have function for find and remove chilnode.

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

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

And the problem was:
item.children was HTMLCollection { length: 0 } with exist element. When I use item.children[0] it giving undefined.
enter image description here

How I can solve problem or how write script with another way(Dont share simple ways. The data from JSON are big!)???

console.log(item.children)