如何在调用函数之前明确div？

Question

因此，我在云 fireStore 中创建了一个数据库，其中包含包含文档（每个国家/地区的城市）的国家/地区集合，我还创建了一个函数，用于显示包含城市列表的特定集合。当用户登录网络应用程序时，用户必须选择国家和城市，之后用户将看到特定国家的城市列表。问题是这样的。当我调用 function 时showUkraine()，我得到乌克兰城市列表，之后当我调用 function 时showPoland()，我得到乌克兰城市之后的波兰城市列表，但我想清除乌克兰城市并且只有波兰城市。这是 JAVA SCRIPT 代码：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);}

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>