如何使用 JavaScript 代码删除已通过的日历项目？

Question

我使用这个 HTML 代码来显示我的事件

<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>

如何使用Javascript让它在日期过后删除它？因此，就像 2017 年 12 月 25 日下午 12:00 一样，12/22/2017 事件被删除并消失了。我使用新的 Google 站点并想知道它是如何工作的。

Answer 1

给定当前标记的最简单代码比需要的要复杂一些，但是使用 querySelectorAll 和一些数组方法，您可以这样做：

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>

如果将每个 "date" 包裹在 div 中，它会变得更容易

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>

如果您向每个 div 添加一些有用的信息，那就更容易了 - 例如

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>

如何使用 JavaScript 代码删除已通过的日历项目？

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

javascript

calendar

today-extension