JS天气应用搜索新城市时旧天气预警残留不消失问题排查

异常由两个逻辑漏洞共同导致：

• OpenWeather One Call 3接口的返回规则是：查询区域无生效天气预警时，响应数据中完全不会返回alerts字段，而非返回空数组。你现有代码的清空逻辑写在else if (response.data.alerts && response.data.alerts.length < 1)分支下，这个分支只有在alerts字段存在、且为空数组时才会触发。当接口不返回alerts字段时，两个判断分支都不会命中，旧的预警内容就会一直留在页面上。
• 你仅在有预警时给容器设置了红色背景，但清空内容时没有同步重置容器样式，就算后续命中清空分支，也会残留一块红色背景块。

直接替换原有showAlerts函数即可，修复后代码如下：

function showAlerts(response) {
  const alertsElement = document.querySelector("#alerts");
  // 函数执行第一步先重置容器默认状态，清除上一次搜索的残留内容和样式
  alertsElement.innerHTML = "";
  alertsElement.style.backgroundColor = "initial";

  // 仅当存在有效预警数据时才渲染预警内容
  if (response.data.alerts?.length > 0) {
    alertsElement.style.backgroundColor = "#981f15";
    alertsElement.innerHTML = `<div class="alert"> ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
  }
}

核心修复逻辑：

• 把容器重置逻辑放到函数最开头，不管本次请求有没有预警，先把上一次的内容和样式清掉，从根源避免残留
• 用可选链?.简化判断逻辑，同时覆盖alerts字段不存在、alerts为空数组两种无预警场景，删掉了永远无法命中的冗余else if分支
• 重置背景样式时如果你的#alerts容器本身有自定义默认背景，把initial换成对应的默认色值即可

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