Удалить родительский div, если дата истекла по классу, а не по идентификатору

Question

Попытка показать / скрыть div, если дата истекла по классу, а не по идентификатору.

HTML

<div class="test">
<input type="date" class="date-input" value="2022-09-14" />
</div>

<div class="test">
<input type="date" class="date-input" value="2018-09-11" />
</div>

jQuery

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date($('.date-input').val());

  if (current.getTime() > expiry.getTime()) {
    $('.date-input').parents('div').hide();

  } else if (current.getTime() < expiry.getTime()) {
    $('.date-input').parents('div').show();
  }

}, 0);

См .: https://jsfiddle.net/qhgrtwzm/832/

В этом примере отображаются оба элемента div, поскольку первая дата еще не истекла.Как мне применить show / hide к каждому отдельному div без использования id?

Буду очень признателен за любую помощь, которую вы можете оказать.Спасибо.

Редактировать - На случай, если кому-то будет интересно, как я собираюсь использовать этот код ... Я хочу, чтобы события исчезли, когда истечет дата.См .: https://www.citychurchchristchurch.co.nz/events

Answer 1

window.setInterval(function() {

  var current = new Date();

  $('.date-input').each(function(){
    var jqDiv = $(this).parent('div');
    if (current > new Date($(this).val())) {
      jqDiv.hide();
    } else {
      jqDiv.show();
    }
  });

}, 0);

Answer 2

как насчет использования функции фильтра.

запустить фрагмент ниже

window.setInterval(function() {
$(".date-input" ).show();
$( ".date-input" )
  .filter(function( index ) {
    return new Date() >  new Date($(this).val()) 
  }).parent('div').hide();
}, 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<input type="date" class="date-input" value="2022-09-14" />
</div>

<div class="test">
<input type="date" class="date-input" value="2018-09-11" />
</div>