Whenever I call the function updategrid() my code is suppose to iterate over all the existing children of div.container and remove each of the childNode. Rather than doing that it removes exactly half of the children and leaves the rest.

Heres the javascript:

function updateGrid() {
  for(const child of container.children) {
    console.log(child)
    container.removeChild(child)
  }
}

gridDisplay(16, 16)

function gridDisplay(yNodeCount, xNodeCount) {
  for (let i = 0;i < yNodeCount; ++i) {
    let div = document.createElement('div');
    div.classList.add('children');
    container.appendChild(div);
    for(let j = 0; j < xNodeCount; ++j) {
      let div2 = document.createElement('div');
      div2.classList.add('xChildren');
      div.appendChild(div2);
    }
  }
}

Here's is the HTML:

    <div class="container">
    </div>

Here are the children div after calling the updateGrid() function:

html output screenshot