如何使用javascript清除JSON列表

Question

我正在创建一个网站，并添加了一个wikipedia JSON函数，我已经让它工作起来，点击后就会加载wikipedian搜索列表，但我也想添加一个按钮，在加载列表后清除列表，因为目前，我必须刷新页面，以便列表离开页面。

我是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，列表清除而无需重置页面！