Hide just one item in a list based on date with JavaScript

Question

I have a list with dates:

<ul>
      <li class="demo">2021-01-07</li>
      <li class="demo">2021-03-23</li>
      <li class="demo">2021-03-20</li>
      <li class="demo">2021-05-20</li>
</ul>

I want list items that are older than today's date to be hidden. In this case (today is Feb. 12, 2021), it would be the first item.

Here is what I tried:

var expiretext = $(".demo").html();
var expire = new Date(expiretext);
var now = new Date();
if (now > expire) {
  $(".demo").hide();
}

This hides all the items. How do I hide only the item with the passed date?

Bit of simple debugging `console.log(expiretext)` would help a long way — freedomn-m, Feb 12 '21 at 17:22

ikiK · Accepted Answer · 2021-02-12T17:28:28.323

Also read about JS date formats here to be more precise and apply adiitonal logic if needed:

Converting a string to a date in JavaScript

And additional useful info for you:

What's the best way to loop through a set of elements in JavaScript?

document.querySelectorAll("ul li.demo").forEach( li => {
  let dat = new Date(li.innerText)
  let currentdate = new Date();
  if (dat < currentdate){li.style.display="none"}
});

<ul>
  <li class="demo">2021-01-07</li>
  <li class="demo">2021-03-23</li>
  <li class="demo">2021-03-20</li>
  <li class="demo">2021-05-20</li>
</ul>

score 0 · Answer 2 · answered Feb 12 '21 at 17:25

When you select .demo, It returns a list. Which you should loop each of them

var now = new Date();
$(".demo").each((idx, ele) => {
    let expire = new Date($(ele).text());
    if (now > expire) {
        $(ele).hide();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="demo">2021-01-07</li>
    <li class="demo">2021-03-23</li>
    <li class="demo">2021-03-20</li>
    <li class="demo">2021-05-20</li>
</ul>

Hide just one item in a list based on date with JavaScript

2 Answers2