输入新城市时如何自动清空原有天气数据

开发天气应用时，如何通过openweather api实现界面无痕更新？关键在于利用JavaScript在请求前清除旧数据，避免信息堆叠。

当前代码中，displayWeather()和displayForecast()函数会不断向DOM追加内容，导致切换城市时页面出现多组天气数据重叠。解决问题的核心在于：发起新请求前主动清空容器节点。

✅ 正确做法：添加 resetUI() 清理函数

在执行fetchWeather(city)和fetchForecast(city)之前，需要先调用清理函数：

function resetUI() {
  // 清空主天气显示区域
  header.innerHTML = '';
  row.innerHTML = '';
  info.innerHTML = '';
  // 清空预报区域（注意：middle 是 forecast 的容器）
  middle.innerHTML = '';
}

接着修改handleClick函数，确保每次查询前重置界面：

function handleClick(event) {
  event.preventDefault();
  const cityInput = document.getElementById("cityInput").value.trim();
  if (!cityInput) return; // 防止空输入触发请求
  resetUI(); // ? 关键：先清空旧内容
  fetchWeather(cityInput);
  fetchForecast(cityInput);
}

⚠️ 注意事项与优化建议

1. 不要仅清空input值：单独清除cityInput.value无法解决DOM数据累积问题；

2. 避免重复创建节点：displayWeatherIcon()中的row.prepend(icon)会持续前置插入，建议改为row.innerHTML = ''后重新插入，或使用row.replaceChildren(icon)；

3. 增强健壮性：确保header、row、info、middle等DOM元素具有唯一标识，防止误删其他内容；

4. 添加加载提示：在resetUI()中设置loading状态提升体验：

   function resetUI() {
     header.innerHTML = '';
     row.innerHTML = '
   Loading...
   ';
     info.innerHTML = '';
     middle.innerHTML = '';
   }

✅ 最终效果

输入新城市名称后，页面会立即清除旧天气信息，再获取并展示新数据，整个过程无需刷新且无残留。

这种"清除-请求-渲染"模式是SPA应用中处理动态数据的标准方案，既高效又稳定，适用于各类API驱动的实时数据展示场景。