Удаление и добавление элементов div в родителя при изменении размеров самого родителя, чистый JS

Есть родитель .box у него дети .belem:

<div class="box">

<div class="belem">1</div>
<div class="belem">2</div>
<div class="belem">3</div>
<div class="belem">4</div>
<div class="belem">5</div>
<div class="belem">6</div>

</div>

Есть скрипт который отслеживает изменение родителя .box, подсчитывает кол-во детей .belem которых нужно удалить и удаляет их с конца массива:

<script>

//
document.addEventListener('DOMContentLoaded', function(){

// elements count in .box
let bmcnt = Number(document.getElementsByClassName('belem').length);

// size all .belem
let bmasz = bmcnt*175;

// width+padding number
let boxlm = Number(document.getElementsByClassName('box')[0].clientWidth);

//
window.addEventListener("resize", function(event) {
 
//
let obj = document.getElementsByClassName('belem');

// size (width+padding) .box
let boxwp = Number(document.getElementsByClassName('box')[0].clientWidth);
    
//
let rcnt = bmcnt-Math.floor(boxwp/175);

//
if (rcnt > 0) {

//
for (i=1; i<=rcnt; i++) {
  
//
let fori = obj.length-i;
document.getElementsByClassName('belem')[fori].style.visibility="hidden";

}

}


}, false);


})

</script>

С удалением (скрытием) все просто, как быть с возвращением детей .belem? Интересуюсь есть ли варианты которые не будут связаны с определением ширины родителя .box?