Question

我正在寻找代码（HTMl，CSS或javascript）或任何解决我问题的方法。最近，我受命为公司网站的设计和功能提供帮助。这里有一个页面，其中列出了雇员在这一年中将要参加的活动。例如：

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

是否有任何代码可以在通过该列表后删除该列表中的元素？还是我必须每天手动将其从列表中删除？

我不反对重新创建整个列表的想法，因此任何事情都会有所帮助！谢谢您提前提供的所有帮助！

Answer 1

您可以编写Javascript函数并使用
var list = document.getElementById("myList");以获取列表。您可以使用
删除列表项 list.removeChild(list.childNodes[0]); 您可以使用CSS选择器在list.removeChild（）中指定li元素。

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

首先让我们向您的ul添加一个id，以便于访问。（“ myList”）
然后：

render() {
return (
  <section className="col">
    <div className="input-group">
      <input type="text" 
      id="search-input" 
      ref="searchInput" 
      className="form-control" 
      placeholder="Filter location..." 
      onChange={this.handleChange} />
      <span className="input-group-addon">Filter</span>
    </div>
  </section>
)
}

我将日期格式从您写的格式（MM / DD / YYYY）更改为Date类的适当格式，然后为其指定了日期，并将其与当前时间进行了比较
如果当前时间小于我们检查的日期，那么我们会将其保存在新数组中，反之亦然
最后，我们将过滤后的项目添加到列表

希望对您有帮助

根据日期动态删除列表项的代码

3 个答案: