根据页面加载日期删除 <li>答案

【问题标题】：Remove <li> based on date on pageload根据页面加载日期删除 <li>
【发布时间】：2018-06-26 20:54:47
【问题描述】：

我正在寻找能够动态删除在我的手风琴中传递的事件的代码。这是手风琴：

 <div class="container3">

          <div class="accordion">
            <dl>
              <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Travel Territory</a>
              </dt>
              <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
                <p><li>Test 1</li>
                <li>Test 2</li></p>
              </dd>
              <dt>
                <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">Catch me at these schools!</a>
              </dt>
              <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">

                <p><ul id="myList">
                <li>03/24/2018 at Upper Darby High School 1</li>
                <li>03/24/2019 at Upper Darby High School 2</li>
                </ul>
                </p>
              </dd>
            </dl>
          </div>
        </div>

在 ID 为 Mylist 的 UL 中，您将看到日期。出于测试目的，我做了两个不同的年份，但通常它们会在几天之内。我正在寻找某种可以删除这些的代码

事件结束后。我希望在该列表中放置大约 15 个事件，并且不想在每次事件后都返回并删除它们。有没有人有任何代码可以根据日期和页面加载来删除项目？

谢谢，抢

【问题讨论】：

重复您自己之前的问题，Code to Dynamically Remove List items depending on date // 请不要创建重复项 - 解决您在现有问题上已经得到的答案的任何问题，在那里也是如此。另外，这不是一个一开始就放弃您的要求的网站 - 您应该展示到目前为止您所做的工作以尝试自己解决这个问题。请阅读How to Ask。
投票关闭它..

标签： javascript jquery html css

【解决方案1】：

小sn-p解决你的问题。

首先我们得到所有的 li。

然后我们通过拆分获取日期。这里很重要。如果日期更改位置或格式，它会刹车。我会建议通过数据属性添加直径。

然后我们将 li 的日期与今天进行比较。

如果它符合您的条件，我们将其删除。

$('#myList').children().each( function(){
  let liDate = new Date(this.innerHTML.split(' ')[0]);
  let today = new Date;
  if(today > liDate){
    $(this).remove();
  }
})

$('#myList').children().each( function(){
  let liDate = new Date(this.innerHTML.split(' ')[0]);
  let today = new Date;
  if(today > liDate){
    $(this).remove();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container3">

          <div class="accordion">
            <dl>
              <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Travel Territory</a>
              </dt>
              <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
                <p><li>Test 1</li>
                <li>Test 2</li></p>
              </dd>
              <dt>
                <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">Catch me at these schools!</a>
              </dt>
              <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">

                <p><ul id="myList">
                <li>03/24/2018 at Upper Darby High School 1</li>
                <li>03/24/2019 at Upper Darby High School 2</li>
                </ul>
                </p>
              </dd>
            </dl>
          </div>
        </div>

【讨论】：