Как очистить список JSON, используя javascript

Question

Я создаю веб-сайт и добавил функцию wikipedia JSON, она у меня работает и список поиска по Википедии загружается при нажатии, но я также хотел бы добавить кнопку, чтобы очистить список после того, как список загружен, как в настоящее время, я должен обновить sh страницу, чтобы список сошел со страницы.

Я довольно новичок с Javascript, я добавил кнопку и добавил const , Часть моего кода можно увидеть на codepen: https://codepen.io/Jaderianne/pen/PoPbEyN, а также здесь:

"use strict";

(function() {
  const xhr = new XMLHttpRequest();
  const queryBox = document.getElementById("wikiQuery");
  const searchForm = document.getElementById("wikiForm");
  const demoJSON = document.getElementById("demo");
  const deleteBtn = document.getElementById("deleteBtn");

  // the base for the request url
  const baseURL = "https://en.wikipedia.org/w/api.php? \
                format=json& \
                action=query& \
                generator=search& \
                gsrnamespace=0& \
                gsrlimit=10& \
                prop=info|extracts|langlinks|pageimages& \
                inprop=url& \
                exintro& \
                explaintext& \
                exsentences=1& \
                exlimit=max& \
                llprop=url& \
                lllimit=max& \
                piprop=thumbnail|name& \
                origin=*& \
                gsrsearch=";

  function gatherData(data) {
    let theData = "";
    let langLinks = "";
    let img = "<img>";
    const languages = ["en", "de", "zh", "fr", "es", "ja", "ar", "ko", "el"];
    let k;
    let key;

    for (key in data.query.pages) {
      let tmp = data.query.pages[key];
      if (tmp.thumbnail) {
        img = `<img src="${tmp.thumbnail.source}" alt="${tmp.title}"> `;
      }
      let title = `<strong><a href="${tmp.fullurl}">${tmp.title}</a></strong>`;
      let extract = `<span class="txt">${tmp.extract}</span>`;
      langLinks = "";
      for (k in tmp.langlinks) {
        if (languages.includes(tmp.langlinks[k].lang)) {
          langLinks += `<a href=${tmp.langlinks[k].url}>${tmp.langlinks[k].lang}</a> `;
        }
      }
      theData += `<li>${img} ${title} ${extract} <span class="langs">${langLinks}</span></li>`;
    }
    demoJSON.innerHTML = theData;
  }

  // the API call is triggered once the user submits a query
  searchForm.addEventListener("submit", function(ev) {

    let wiki = baseURL + queryBox.value;
    xhr.open("GET", wiki, true);
    xhr.setRequestHeader('Api-User-Agent', 'Example/1.0');
    xhr.send();

    xhr.onreadystatechange = function() {

      if (xhr.readyState === 4 && xhr.status === 200) {
        let response = JSON.parse(xhr.responseText);

        gatherData(response);
      }
    };
    // clear the search box
    queryBox.value = "";
    ev.preventDefault();
  }, false);

}());

Может кто-нибудь объяснить, что мне нужно добавить, чтобы заставить работать кнопку очистки и Очистите список после его загрузки, а также объясните каждый шаг, пожалуйста.

Спасибо

Answer 1

Мне удалось решить это самому.

Я добавил:

function removeList () {
while (demoJSON.firstChild) {
demoJSON.removeChild(demoJSON.firstChild);
 }
}

  deleteBtn.addEventListener('click', ev => {
  removeList();
});

к моему javascript, и список очищается без необходимости сбрасывать страницу!