htmlに記載のある日時を変数に置き換えて対応したい。

Question

下記のようなjsで『2021/06/30 08:33:00』の部分で時間が来たら非表示になるようなjsなのですが、

var endday = new Date('2021/06/30 08:33:00');
    var today = new Date();
    var kesu = document.getElementsByClassName("new"); 

    for(var i=0; i < kesu.length; i++) {
        if ( today < endday ){
            kesu[i].style.display="block";
        }else{
            kesu[i].style.display="none";
        }
    }

<span class="new">NEW</span>

この『2021/06/30 08:33:00』の部分を下のようにhtmlの方に記載があるという事にして、それを読み取って上のjsが動くように変えたいです。

<span class="new">2021/06/30 08:33:00</span>

これはどのような方法でできますでしょうか？

Comments

[yambejp]

条件があいまいです。
クラスnewがついたspanのテキストが過去なら非表示ということでしょうか？
クラスnew内のテキストが日時として不適格だったときはどうするのでしょうか？

[退会済みユーザー]

申し訳ございませんでした。

基本的に過去の日時になる時はないのですが、
もし過去の日時になっていたり、不適格な場合は、非表示という感じにしたいと思っております。

[yambejp]

過去のデータを非表示にするのではなく、
その時間を過ぎたら非表示にするということでしょうか？

[退会済みユーザー]

そうですね。
基本的には10日後とか15日後とかの日時が入る予定でいますので、
その日時が過ぎたら、自動的に非表示にするというjsを作りたいと思っております。

言葉足らずで、大変申し訳ございませんでした。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const now=new Date();
  document.querySelectorAll('.new').forEach(x=>{
    x.style.display=now<new Date(x.textContent)?"":"none";
  });
});
</script>
<span class="new">2021/05/01 00:00:00</span>
<span class="new">2021/06/01 00:00:00</span>
<span class="new">2021/07/01 00:00:00</span>
<span class="new">2021/08/01 00:00:00</span>

追記

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  setInterval((function func(){
    const now=new Date();
    document.querySelectorAll('.new:not([hidden])').forEach(x=>{
      x.hidden=!(Date(x.textContent) && now<new Date(x.textContent));
    });
    return func;
  })(),1000);

});
</script>
<span class="new">2021/05/01 00:00:00</span>
<span class="new">2021/06/01 00:00:00</span>
<span class="new">2021/07/01 00:00:00</span>
<span class="new">2021/08/01 00:00:00</span>
<span class="new">test</span>

Comments

[退会済みユーザー]

ありがとうございます。やりたいこと実現できました。助かりました。