Попытка получить общее количество делений в документе html jquery

Question

Я печатаю несколько div с php. Затем я проверяю, сколько divs есть с jquery. Когда временной код запускается, я удаляю box_num_3 из DOM. Но общее число div все равно 5. Я думаю, что это потому, что DOM на заднем плане не был обновлен. Как мне решить эту проблему?

<?php
 for($i=0; $i<5; $i++){
  echo '<div class="box box_num_'.$i.'">Div</div>';
 }
?>


<script>
 var interval = setInterval(function(){
    var box_nums = $(".box").length;
    console.log("total box->"+box_nums);
 }, 1000);
</script>


<script>
    //TIME CODE
    var timer = 5;
    var cd_timer = setInterval(function(){
        timer-=1;
        console.log(timer);
        if(timer==0){
            clearInterval(cd_timer);
            $(".box_num_3").fadeOut(1000);
        }
    },1000);
</script>

Редактировать: Решил проблему, спасибо всем, кто ответил.

$(".box").fadeOut();
//instead
$(".box_num_3").remove();

Answer 1

var container_div = document.getElementById('id_of_container_div');
var count = top_level_div.getElementsByTagName('div').length;

Для подсчета всех div указанного класса выполните:

var numItems = $('.item').length;

Answer 2

Просто используйте length, используя селектор с видимостью, после ожидания скрытия элементов.

// A $( document ).ready() block.
$( document ).ready(function() {
  var total_div_after = 0;
    $('div.fade').fadeOut(1000, function() {
      total_div_after = $('div').not(":hidden").length;
      console.log('After fade:', total_div_after);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Visible</div>
<div class="box">Visible</div>
<div class="box">Visible</div>
<div class="box fade">(fade)</div>