Удаление childNodes из parentNode

Question

1 - Я добавляю контейнер Div с использованием JS, но как только их Счетчик пересекает '5', я хочу удалить эти контейнеры Div ONE BY ONE из индекса [0].

2 -Ниже приведено то, что я сделал до сих пор, в котором я даже получаю номер childNodes, но я не могу удалить эти узлы.

var counter = 0;

function add_div() {
  var mainDiv = document.getElementById("main-div");

  var divi = document.createElement("DIV");
  divi.setAttribute("ID", "div_id");
  divi.style.backgroundColor = "red";
  divi.style.height = "50px";
  divi.style.width = "50px";
  divi.style.margin = "20px";
  mainDiv.appendChild(divi);
  document.body.appendChild(mainDiv);
  document.body.style.backgroundColor = "blue";
  counter += 1;
  document.getElementById("count").innerHTML = counter;

  //read nodes
  var ch = document.getElementById("main-div").childElementCount;
  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;

  //counter check
  if (counter > 5) {
    mainDiv.removeChild(mainDiv.childNodes[0]);
    // mainDiv.parentNode.removeChild(mainDiv);
  }
}

<button onclick="add_div()">ADD DIV</button>
<div id="count"></div>
<div id="demo"></div>
<div id="main-div"></div>

Answer 1

Сначала я уменьшил ваш счетчик, чтобы обновить как отрицательные, так и положительные значения.Затем я установил флаг , чтобы определить, уменьшается ваш код или нет.Когда счетчик достиг 5, декремент устанавливается на true, где, когда счетчик движется к 5, декремент устанавливается на false.

Затем ваши div были добавлены в массив, где мы используем for loop для перемещения по массиву, удаляя div один за другим, пока мы не достигнем 0, где декремент возвращается к значению false;

var counter = 0;

 let decrement = false;
function add_div() {
  if(!decrement){
    var mainDiv = document.getElementById("main-div");

  var divi = document.createElement("DIV");
  divi.setAttribute("ID", "div_id");
  divi.style.backgroundColor = "red";
  divi.style.height = "50px";
  divi.style.width = "50px";
  divi.style.margin = "20px";
  mainDiv.appendChild(divi);
  document.body.appendChild(mainDiv);
  document.body.style.backgroundColor = "blue";
  counter ++;
  document.getElementById("count").innerHTML = counter;


 
  }
  
  //counter check
  if (counter > 5) {
    decrement = true;
  }
  if(counter <= 0){
      decrement = false;
    }
  if(decrement){
    counter--; //decrement counter
    let holder = [];                                     //place div ID's in array
    document.getElementById("count").innerHTML = counter; //update counter
    let div = document.querySelector('#div_id');           //grab div
    holder.push(div);                                        //push to array
    for(let i = 0; i < 5; i++){
     holder[i].parentNode.removeChild(holder[i]) //removes child
    }
   
  }
  
}

<button onclick="add_div()">ADD DIV</button>
<div id="count"></div>
<div id="demo"></div>
<div id="main-div"></div>