05-Results Update

In this module, we'll work on updating the dom after a new search.

Updating

Right now, if we were to run another search without refreshing the page, the newest JSON would append to the bottom of the results. Try this: 1. Open the app. 2. Open Chrome tools. 3. Do a search and get the results. 4. Without refreshing the page, do another search. 5. Notice that the results are appended to the bottom.

Removing the First Result

At the top of the displayResults function, add the following code. Again, note that some code is omitted:

function displayResults(json) {
  while (section.firstChild) {
      section.removeChild(section.firstChild); //1

  }
};

Here's what's happening: 1. We run the displayResults function each time the button gets pressed. In this chunk of code, we are checking to see if the section element has any child elements. If the section.firstChild is true, then we call removeChild on the section variable, which targets the section element in the html file. This simply will clear out any child elements that are in the section.

Simply put, the while loop will clear out any articles before new search results are added.

TEST

Test the app by doing the following: 1. Open the app. 2. Open Chrome tools on the "elements" tab. 3. Do a search and get the results. 4. Without refreshing the page, do another search. 5. You should see the elements in the section disappear, and the new elements should be created.