求助：为何jQuery的.empty()方法无法清空已追加HTML元素的容器？

嘿，我一眼就看出问题所在了——不是empty()没起作用，是你存储假期数据的数组从来没被清空过！

你看，你在事件外部声明了monthHolidayName这些数组，每次切换月份时，代码只是往数组里追加当前月份的新数据，之前月份的旧数据还留在数组里。虽然你调用了$("#holidays").empty()清空了页面元素，但接下来的循环会把数组里所有旧数据+新数据一起重新追加到页面上，看起来就像清空操作没生效一样。

修复方案：每次切换月份时先清空数组 #

把数组清空的代码放到change事件的最开头，这样每次切换都能从零开始收集当前月份的假期数据：

$('#monthSelect').change(function(){
    // 关键：先清空所有存储假期数据的数组
    monthHolidayName = [];
    monthHolidayDescription = [];
    monthHolidayDay = [];
    monthHolidayMonth = [];
    monthHolidayIsoDate = [];

    var selectedMonth = $('#monthSelect').val();
    var numSelectedMonth = parseInt(selectedMonth) + 1;

    for(i = 0; i < result['data']['holidays'].length; i++){
        var holidayMonth = result['data']['holidays'][i]['date']['datetime']['month'];
        if(holidayMonth === numSelectedMonth){
            monthHolidayName.push(result['data']['holidays'][i]['name']);
            monthHolidayDescription.push(result['data']['holidays'][i]['description']);
            monthHolidayDay.push(result['data']['holidays'][i]['date']['datetime']['day']);
            monthHolidayMonth.push(result['data']['holidays'][i]['date']['datetime']['month']);
            monthHolidayIsoDate.push(result['data']['holidays'][i]['date']['iso']);
        }
    }

    $("#holidays").empty();

    // 后续追加代码不变
    for(i = 0; i < monthHolidayName.length; i++){
        var holidayName = monthHolidayName[i];
        var holidayDescription = monthHolidayDescription[i];
        var holidayDay = monthHolidayDay[i];
        var holidayDayMonth = monthHolidayMonth[i];
        var holidayIsoDate = monthHolidayIsoDate[i];
        // 顺便修复你这里的日期格式化错误：Date.parse返回的是时间戳，不能直接调用toString带格式
        var date = new Date(holidayIsoDate);
        var dateParsed = date.toLocaleString('en-US', { month: 'long', day: 'numeric' }) 
                        // 手动添加序数词后缀（比如1st、2nd）
                        .replace(/\d+/, function(n) {
                            var s = ['th', 'st', 'nd', 'rd'];
                            var v = n % 100;
                            return n + (s[(v-20)%10] || s[v] || s[0]);
                        });

        $("#holidays").append(`<div class="list-group-item list-group-item-action"><div style="text-decoration: underline; text-align: center;">${holidayName}</div><div style="text-align: center">${holidayDescription}</div><small class="text-muted">${holidayIsoDate}</small></div>`);
    }
});

额外优化：用单个数组存储假期对象（更简洁） #

其实你不需要声明这么多单独的数组，直接把符合条件的假期对象存到一个数组里，代码会更简洁易维护：

$('#monthSelect').change(function(){
    // 用一个数组存储当前月份的所有假期对象
    let currentMonthHolidays = [];
    var selectedMonth = $('#monthSelect').val();
    var numSelectedMonth = parseInt(selectedMonth) + 1;

    for(i = 0; i < result['data']['holidays'].length; i++){
        let holiday = result['data']['holidays'][i];
        if(holiday['date']['datetime']['month'] === numSelectedMonth){
            currentMonthHolidays.push(holiday);
        }
    }

    $("#holidays").empty();

    for(i = 0; i < currentMonthHolidays.length; i++){
        let holiday = currentMonthHolidays[i];
        var date = new Date(holiday['date']['iso']);
        var dateParsed = date.toLocaleString('en-US', { month: 'long', day: 'numeric' }) 
                        .replace(/\d+/, function(n) {
                            var s = ['th', 'st', 'nd', 'rd'];
                            var v = n % 100;
                            return n + (s[(v-20)%10] || s[v] || s[0]);
                        });

        $("#holidays").append(`<div class="list-group-item list-group-item-action"><div style="text-decoration: underline; text-align: center;">${holiday['name']}</div><div style="text-align: center">${holiday['description']}</div><small class="text-muted">${holiday['date']['iso']}</small></div>`);
    }
});

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