如何使用JavaScript自动移除公告板中已过期的活动div元素

你可以直接在页面中加入以下脚本，页面加载完成后会自动遍历检查所有活动的日期，自动移除过期的活动元素：

// 等待页面DOM元素全部加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function () {
    // 筛选所有活动对应的div元素
    const eventDivs = document.querySelectorAll('div.image');
    // 处理今日日期，清零时分秒避免时间误差导致判断错误
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    eventDivs.forEach(div => {
        // 方式1：从div的id属性读取日期，要求id严格遵循dd-mm-yy格式
        const dateStr = div.id;
        const dateParts = dateStr.split('-');
        // 补全年份为4位，默认活动都是2000年之后的，有特殊需求可调整该逻辑
        const eventDate = new Date(+`20${dateParts[2]}`, +dateParts[1] - 1, +dateParts[0]);
        eventDate.setHours(0, 0, 0, 0);

        // 方式2（更推荐，容错性更高）：从活动内部显示的日期文本读取，格式为dd/mm/yyyy
        // const dateStr = div.querySelector('h4#date').textContent;
        // const dateParts = dateStr.split('/');
        // const eventDate = new Date(+dateParts[2], +dateParts[1] - 1, +dateParts[0]);
        // eventDate.setHours(0,0,0,0);

        // 活动日期早于当日则移除元素
        if (eventDate < today) {
            div.remove();
            // 若仅需要隐藏不需要删除元素，可替换为：div.style.display = 'none';
        }
    });
});

注意事项 #

• 你之前参考的点击移除示例中，变量名30-9-21不符合JS语法规范（变量名不能以数字开头，也不能包含减号运算符），不要使用此类命名方式
• 如果活动存在2000年之前的历史内容，需要调整年份补全的逻辑，优先推荐使用从内部日期文本读取的方式，不需要额外处理年份问题

内容的提问来源于stack exchange，提问作者Milton T