如何使用 javascript 清除 JSON 列表

Question

我正在创建一个网站并添加了一个 wikipedia JSON 函数，我已经让它工作了，点击时会加载 wikipedia 搜索列表，但我还想添加一个按钮以在列表加载后清除列表，目前，我必须刷新页面才能使列表脱离页面。

我是 Javascript 的新手，我添加了按钮并添加了一个常量。我的一段代码可以在 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 和列表清除，无需重置页面！