如何使用javascript清除JSON列表

Question

我正在创建一个网站，并添加了Wikipedia JSON函数，它可以正常工作，并且单击时即可加载Wikipedia搜索列表，但我还想添加一个按钮，以在列表加载后清除列表，与目前一样，我必须刷新页面才能使列表脱离页面。

我对Java语言还很陌生，我添加了按钮并添加了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

我设法自己解决了。