javascript - 如何在下次搜索时自动清除/重置页面？

Question

我正在开发一个简单的程序，它显示查询/搜索地点的天气状况。一切都很好，但我想知道如何自动重置/清除 DOM(或至少显示结果的相关部分)并用新搜索的结果填充它。目前，它会附加结果，除非我手动清除它们(清除按钮)。

我更喜欢将它们放在 JSBin 中，而不是复制/粘贴所有代码 (HTML/CSS/JS-jQuery)。所以这是一个link到“应用程序”，以及其余代码(HTML 和 CSS)。

JS/jQuery 代码

$(function() { 
  function showWeather() {
    let $title       = $("#station"),
        $description = $("#description"),
        $temperature = $("#temp"),
        $chill       = $("#chill"),
        $wind        = $("#wind"),
        $humidity    = $("#humidity"),
        $units       = $(".units").text(),
        $apiPath1    = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22",
        $query       = $('input#city').val(),
        $apiPath2    = "%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
        $url         = $apiPath1 + $query + $apiPath2;

    $("input#city").val("");

    $.ajax({
      type: "GET", 
      url: $url,
      success: function(data) {
        $title.append(`
          <h3>${data.query.results.channel.item.title}</h3>
        `)
        $description.append(`
          <p>${data.query.results.channel.item.condition.text}</p>
        `)
        $temperature.append(`
          <h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
        `)
        $chill.append(`
          <p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
        `)
        $wind.append(`
          <p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>             
        `)
        $humidity.append(`
          <p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>    
        `)
      }
    });
  }
  //Converting Fahrenheit to Celsius
  function fahrToCels(F) {
    return Math.round((5/9) * (F - 32));
  }
  //Converting Celsius to back to Fahrenheit 
  function celsToFahr(C) {
    return Math.round((C * 9/5 + 32));
  }

  $("#submit").on("click", function() {
    showWeather();
  });

  $("input#city").on("keypress", function(event) {
    if (event.which === 13) {
      showWeather();
    }
  });

  $('#clear').on('click', function (event) {
    event.preventDefault();
    $('#station, #description, #temp, #chill, #wind, #humidity').empty('');
  });

  $("#tempUnits").on("click", function() {
    let temp1 = Number($("#temp1").text());
        temp2 = Number($("#temp2").text());

    if ($(".units").html() === "C") {
      $(this).html("Temperature in Celsius")
      $("#temp1").html(celsToFahr(temp1));
      $("#temp2").html(celsToFahr(temp2));
      $(".units").html("F");
    } 
    else {
      $(this).html("Temperature in Fahrenheit")
      $("#temp1").html(fahrToCels(temp1));
      $("#temp2").html(fahrToCels(temp2));
      $(".units").html("C");
    }
  });  
});

干杯!

Answer 1

尝试使用 html 而不是追加

$.ajax({
  type: "GET", 
  url: $url,
  success: function(data) {
    $title.html(`
      <h3>${data.query.results.channel.item.title}</h3>
    `)
    $description.html(`
      <p>${data.query.results.channel.item.condition.text}</p>
    `)
    $temperature.html(`
      <h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
    `)
    $chill.html(`
      <p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
    `)
    $wind.html(`
      <p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>             
    `)
    $humidity.html(`
      <p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>    
    `)
  }
});