Как сделать div понятным перед вызовом функции?

Question

Итак, я создал базу данных в облачном fireStore с коллекциями стран, которые содержат документы (города каждой страны), а также я создал функцию, которая показывает мне конкретную коллекцию c со списком городов. Когда пользователь входит в веб-приложение, он должен выбрать страну и город, после чего пользователь увидит список городов указанной c страны.

ЗДЕСЬ ВОПРОС. Когда я вызываю функцию showUkraine(), я получаю список городов Украины, после этого, когда я вызываю функцию showPoland(), я получаю список городов Поли sh после украинского, но я хочу очистить украинские города и иметь только Poli sh.

Вот код JAVA СКРИПТ:

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

}

Answer 1

Кажется, вам нужно удалять всех потомков из rowDiv каждый раз, прежде чем вызывать showPoland() и showUkraine()?

Попробуйте это:

function selectCountry() {
    var x = document.getElementById("country-list");
    var result = x.options[x.selectedIndex].text;

    while (rowDiv.firstChild) {
         rowDiv.removeChild(rowDiv.firstChild);
    }

    if (result == "Ukraine") {
         showUkraine();
    } else if (result == "Poland") {
         showPoland();
    }
}

Answer 2

попробуйте это,

Вы можете очистить все html содержимое внутри элемента с помощью:

document.getElementById("id of element").innnerHTML = null;

пример:

<div id="key_id">
    <!-- html contents -->
</div>

<script>
    document.getElementById("key_id").innnerHTML = null;
</script>