title: How to make div clear before calling the function?
body: <p>So I created a database in cloud fireStore with countries collections which contain documents (cities of each country), also I've created a function which shows me specific collection with list of cities. When user signs in to web app, the user has to choose country and city, after that the user will see list of cities of specific country.</p>
  
  <p>HERE IS THE QUESTION. When I call function <code>showUkraine()</code>, I get the list of Ukrainian cities, after that when I call function <code>showPoland()</code>, I get the list of Polish cities after Ukrainian, but I want to clear the Ukrainian cities and have only Polish.</p>
  
  <p>Here is the code JAVA SCRIPT:</p>
  
  <pre><code>function showUkraine(){
      db.collection("Ukraine").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " =&gt; ", doc.data());
            renderCountries(doc);
        });
      });
      }
  
      function showPoland(){
      db.collection("Poland").get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " =&gt; ", doc.data());
            renderCountries(doc);
        });
      });
      }
  
      function selectCountry(){
  
          var x = document.getElementById("country-list");
          var result = x.options[x.selectedIndex].text;
  
  
          if(result =="Ukraine"){
            showUkraine();
  
          }
  
          else if(result=="Poland"){
            showPoland();
          }
  
  
        }
  
  
       function renderCountries(doc){
  
      var colDiv = document.createElement("div");
      colDiv.className = "col s12 m8 offset-m2 l4 offset-l";
      // m4 s12 l4
      // "col s12 m3 offset-m2 l4 offset-l"
      rowDiv.appendChild(colDiv); 
  
      var cardDiv = document.createElement("div");
      cardDiv.classList.add("card");
  
      var cardImageDiv = document.createElement("div");
      cardImageDiv.className= "card-image waves-effect waves-block waves-light";
      cardDiv.appendChild(cardImageDiv);
  
      var imgTag = document.createElement("img");
      imgTag.className = "activator"
      imgTag.setAttribute("src", doc.data().img);
      cardImageDiv.appendChild(imgTag);
  
      var cardContentDiv = document.createElement("div");
      cardContentDiv.classList.add("card-content");
      cardDiv.appendChild(cardContentDiv);
  
      var nameSpan = document.createElement("span");
      nameSpan.className = "card-title activator grey-text text-darken-4";
      nameSpan.style.fontSize = "1vw";
      nameSpan.textContent = doc.data().name;
      cardContentDiv.appendChild(nameSpan);
  
      var nameI =document.createElement("i");
      nameI.className ="material-icons right";
      nameI.textContent="more_vert";
      nameSpan.appendChild(nameI);
  
      var cardReaveal = document.createElement("div");
      cardReaveal.classList.add("card-reveal");
      cardDiv.appendChild(cardReaveal);
  
      var spanReveal = document.createElement("span");
      spanReveal.className = "card-title grey-text text-darken-4";
      spanReveal.textContent = doc.data().name;
      cardReaveal.appendChild(spanReveal);
  
      var describeI = document.createElement("i");
      describeI.className ="material-icons right";
      describeI.textContent="close";
      spanReveal.appendChild(describeI);
  
      var describeP = document.createElement("p");
      describeP.textContent= `City: ${doc.data().city}`;
      cardReaveal.appendChild(describeP);
      colDiv.appendChild(cardDiv);
  
      var describeP = document.createElement("p");
      describeP.textContent= `Region: ${doc.data().region}`;
      cardReaveal.appendChild(describeP);
      colDiv.appendChild(cardDiv);
  
      var describeP = document.createElement("p");
      describeP.textContent= `Postal Code: ${doc.data().postalcode}`;
      cardReaveal.appendChild(describeP);
      colDiv.appendChild(cardDiv);
  
      var describeP = document.createElement("p");
      describeP.textContent= `Address: ${doc.data().address} `;
      cardReaveal.appendChild(describeP);
      colDiv.appendChild(cardDiv);
  
  }
  </code></pre>