Как автоматически очистить/сбросить страницу при следующем поиске? ⇐ Jquery

[Anonymous]

Я работаю над простой программой, которая отображает погодные условия в запрашиваемых/искаемых местах. Все хорошо, хотя я хотел бы знать, как автоматически сбросить/очистить DOM (или, по крайней мере, соответствующий раздел, отображающий результаты) и заполнить его результатами нового поиска. На данный момент он добавляет результаты, если я не очистил их вручную (кнопка очистки).

Вместо того, чтобы копировать/вставлять все коды (HTML/CSS/JS-jQuery), я предпочитал хранить их в JSBin. Итак, вот ссылка на «приложение» и, следовательно, на остальные коды (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(`
${data.query.results.channel.item.title}
`)
$description.append(`
${data.query.results.channel.item.condition.text}
`)
$temperature.append(`
${data.query.results.channel.item.condition.temp} °F
`)
$chill.append(`
Feels like: ${data.query.results.channel.wind.chill} °F
`)
$wind.append(`
Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}
`)
$humidity.append(`
Humidity: ${data.query.results.channel.atmosphere.humidity} %
`)
}
});
}
//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");
}
});
});

Всего хорошего!

Подробнее здесь: https://stackoverflow.com/questions/427 ... ext-search