如何使用javascript清除JSON列表
如何使用javascript清除JSON列表
提问于 2020-04-22 06:11:08
我正在创建一个网站，并添加了一个维基百科JSON功能，我有它的工作和维基百科搜索列表加载点击，但我也想添加一个按钮，以清除列表一旦加载，因为目前，我必须刷新页面的列表，以脱离页面。
我是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);
}());谁能解释一下，我需要添加什么才能让清除按钮工作，并清除列表，一旦它已经加载，也请解释每一步。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-22 07:37:36
我设法自己解决了它。
我补充道：
function removeList () {
while (demoJSON.firstChild) {
demoJSON.removeChild(demoJSON.firstChild);
}
}
deleteBtn.addEventListener('click', ev => {
removeList();
});到我的javascript，列表就会清空，而不需要重置页面！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61354125
复制相关文章
相似问题
腾讯云开发者
