How do I use JavaScript code to delete calendar items once they have passed?

Question

I use this HTML code to display my events

<style>
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
</style>
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017</p> </b>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018</p> </b>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018</p> </b>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

How can I use Javascript to make it delete the date after it has passed? So like at 12:00 PM on 12/25/2017 the 12/22/2017 event is deleted and is gone. I use the New Google Sites and wondering how this can work.

what have you tried? there's no javascript in the code you posted — Jaromanda X, Dec 23 '17 at 04:05
I have tried looking up what Javascript code to use but can not find any. — L. Cavinder, Dec 23 '17 at 22:23

Jaromanda X · Accepted Answer · 2017-12-23T23:19:09.460

The simplest code given your current markup is a little more complex than it needs to be, but using querySelectorAll, and some array methods, you can do this:

const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.map(({element}) => element.parentElement)
.forEach(x => {
  x.nextElementSibling.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.remove();
  x.remove();
});

.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}

<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

If you wrap each "date" in a div, it gets easier

const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>div>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.forEach(({element}) => element.parentElement.parentElement.remove());

.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}

<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</div>
</marquee>

Even easier if you add some useful information to each div - e.g

data-date='12/22/2017'

const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
document.querySelectorAll('marquee>div').forEach(element => {
    if (dateFromString(element.dataset.date) < Date.now()) {
        element.remove();
    }
});

.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}

<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div data-date='12/22/2017'>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/25/2017'>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div data-date='12/26/2017'>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/27/2017'>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/28/2017'>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/29/2017'>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div>
</marquee>

I am working on Google Scripts and I am getting a syntax error on line 2 which is: const [m,d,y] = s.split('/').map(v => parseInt(v, 10)); is there any way to fix this from happening? — L. Cavinder, Dec 24 '17 at 01:16
Google... I use New Google Sites and it is not taking the code only HTML. I use Google Scripts to transfer to deploy a web app with a URL to Embed in the Google Sites. — L. Cavinder, Dec 24 '17 at 03:44

How do I use JavaScript code to delete calendar items once they have passed?

1 Answers1