How to clear a JSON list using javascript

Question

I am creating a website and have added a wikipedia JSON function, I have got it working and the list of wikipedia search loads on click, but i'd also like to add a button to clear the list once the list has loaded, as currently, i have to refresh the page for the list to come off the page.

I am fairly new with Javascript, i've added the button and have added a const. A section of my code can be seen on codepen: https://codepen.io/Jaderianne/pen/PoPbEyN and also here:

"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);

}());

Could someone please explain what I need to add to get the clear button to work and clear the list once it has been loaded, and also explain each step please.

Thank you

Take a look at the answers to [this question](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript). There are many suggestions, starting with setting `element.innerHTML = ""` or `element.textContent = ""`. — jirassimok, Apr 21 '20 at 22:17
Also, if you're using template strings to construct HTML, make sure to escape everything to prevent HTML injection. [Tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) could be a good solution. — jirassimok, Apr 21 '20 at 22:27
@jirassimok I've attempted to use the solutions provided on the post you've given me but they do not seem to work. — RianneJ, Apr 21 '20 at 22:55

score 0 · Accepted Answer · answered Apr 21 '20 at 23:37

I managed to resolve it myself.

I added:

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

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

to my javascript and the list clears without the need to reset the page!

How to clear a JSON list using javascript

1 Answers1