Remove days/hours/minutes when timer hits 00 in jQuery.countdown

Question

I am using jQuery.countdown and are try to Remove days/hours/minutes when timer hits 00 with update callback function .on('update.countdown', function(event) {. So, almost working fine. but, just one issue. It is stop on 01sec when end of last second in last minute. So, it does not hide. why it does not 00 sec?

I Got: 01s

Should be: 00s

var countdown = $('.countdown[data-countdown-end]');
if (countdown.length > 0) {
    countdown.each(function() {
        var $countdown = $(this),
            finalDate = $countdown.data('countdown-end');
        $countdown.countdown(finalDate)
            .on('update.countdown', function(event) {
              var format = '<span>%-d</span> day%!d '
                  + '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              if(event.offset.totalDays === 0) {
                  format = '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              } 
              if(event.offset.totalHours === 0) {
                  format = 
                  '<span>%M</span> min '
                  + '<span>%S</span> sec';
              }
              if(event.offset.totalMinutes === 0) {
                  format = '<span>%S</span> sec';
              }
              if(event.offset.totalSeconds === 0) {
                  format = '';
              }
            $countdown.html(event.strftime(format));
    }); 
});
}

Working fine without update callback function:

if, I have used default code without update callback. So, It is stop on 00sec when end of last second in last minute.

I Got (Fine): 00d 00h 00m 00s

var countdown = $('.countdown[data-countdown-end]');
if (countdown.length > 0) {
    countdown.each(function() {
        var $countdown = $(this),
            finalDate = $countdown.data('countdown-end');
        $countdown.countdown(finalDate, function(event) {
            $countdown.html(event.strftime(
                '%Dd %Hh %Mm %Ss'
            ));
        });
    });
}

Why it does not 00 sec with update callback code?

Answer 1

I got finally solution from Advanced example. It is working fine with finish callback function.

Final working my code below:

var countdown = $('.countdown[data-countdown-end]');
if (countdown.length > 0) {
    countdown.each(function() {
        var $countdown = $(this),
            finalDate = $countdown.data('countdown-end');
        $countdown.countdown(finalDate)
            .on('update.countdown', function(event) {
              var format = '<span>%-d</span> day%!d '
                  + '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              if(event.offset.totalDays === 0) {
                  format = '<span>%H</span> hr '
                  + '<span>%M</span> min '
                  + '<span>%S</span> sec';
              } 
              if(event.offset.totalHours === 0) {
                  format = 
                  '<span>%M</span> min '
                  + '<span>%S</span> sec';
              }
              if(event.offset.totalMinutes === 0) {
                  format = '<span>%S</span> sec';
              }
            $countdown.html(event.strftime(format));
    })
   .on('finish.countdown', function(event) {
        $countdown.addClass('disabled');
    });
});
}

Css

.countdown.disabled {display:none;}

Answer 2

I use the code below on my site, which at the end of the count, when I delete a button as shown in the "due date", it would show another div with a message (timeout)

var buy_date = new Date("DATA DO POST")
var min_max = parseInt("TEMPO DO CONTADOR")

if (min_max > 0) {
   var expire_date = new Date(new Date(buy_date).setMinutes(buy_date.getMinutes() + min_max))
  // console.log({ buy_date, expire_date })
  min_max = min_max*60

  jQuery('#clock')
    .countdown(expire_date)
    .on('update.countdown', function(event) {
      //console.log(event.offset)
      minutes = event.offset.minutes;
      hours = event.offset.hours;
      time = event.offset.totalSeconds
      var format = '%H:%M:%S';

      if (event.offset.totalDays > 0) {
        format = '%-d dias%!d ' + format;
      }
      if (event.offset.weeks > 0) {
        format = '%-w semanas%!w ' + format;
      }
      jQuery("excluircontador").attr("data-expiration", time/60 >= 10 ? Math.floor(time/60) : 10);
      jQuery(".progress-bar").css("width",  time ? 100*(min_max-time)/min_max +"%" : "100%");
      jQuery(this).html(time ? event.strftime(format) : "00:00:00");
    }).on('finish.countdown', function() {
      document.location.reload(true);
    });
}