How do I automatically clear/reset the page upon next search?

Question

I'm working on a simple program which displays the weather conditions of queried/searched places. All is well, though I'd like to know how to automatically reset/clear the DOM (or at least the relevant section displaying the results) and populate it with results of the new search. At the moment, it appends the results unless I clear them manually (clear button).

Rather than copy/paste the all the codes (HTML/CSS/JS-jQuery), I preferred having them at JSBin. So here is a link to the 'app', and thus the rest of the codes (HTML and CSS).

JS/jQuery Code

$(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");
    }
  });  
});

Cheers!

Answer 1

Use

$title.html('<h3>${data.query.results.channel.item.title}</h3>')

instead of

$title.html('<h3>${data.query.results.channel.item.title}</h3>')

Replace other $.append(content) with $.html(htmlString)

Answer 2

Try using html instead of append

$.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>    
    `)
  }
});