Code to Dynamically Remove List items depending on date

Question

I am looking for code (HTMl, CSS, or javascript) or any way to solve my issue. I recently have been tasked to help with the design and function of my company's website. There is a page that will have a list of events that an employye will be at during the year. For example:

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

Is there any code that can remove elements of that list after they have passed? OR do I have to go in a manually remove it from the list every day?

I am not against recreating the whole list idea so anything will help! Thank you for all the help in advance!

Answer 1

You can write a Javascript function and use
var list = document.getElementById("myList");to get the list. You can remove list items using
list.removeChild(list.childNodes[0]); You may specify the li element inside list.removeChild() using css selectors.

Answer 2

var filterFunc = function (parentElm, yearToCheck) {
    var listElms = $(parentElm).children();
    var count = listElms.length;
    for (var i=0 ; i < count; i++ ){
        var data = $(listElms[i]).html();
        var dateText = data.split(" ")[0];
        var year = new Date(dateText).getFullYear();
        if(year != yearToCheck) {
            $(listElms[i]).remove();
        }
    }
}

filterFunc(parentElement, "2018");

Answer 3

first lets add an id to your ul for ease of access.("myList")
then:

function filterDates(){
     var list = document.getElementById("myList"); //wanted substring from first of the string to the first space
     var listItems = Array.from(list.children); //list.children is not actually an array
     list.innerHTML = "" //make the list empty
     var now = new Date(); //current time

     var filteredList = listItems.filter(function(li){
        var dateString = li.innerHTML.split(' ')[0];
        var splited = dateString.split('/') //it is an array: [MM, DD, YYYY]
        var dateToCheck = new Date(splited[2], splited[0], splited[1]); // new Date(year, month, day)
        return dateToCheck.getTime() > now.getTime();
     })
     filteredList.forEach(function(el){
        list.appendChild(el);
     })
}

I changed the date format from what you've wrote (MM/DD/YYYY) to Date class appropriate format, then made a date of it, and compared it to current time
if current time is lessthan the date we are checking, then we do keep it in new array and vice versa
and at the last, we add filtered items to list

hope it helps