如何在调用函数之前明确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">&nbsp; &nbsp; <!-- html contents --></div><script>&nbsp; &nbsp; document.getElementById("key_id").innnerHTML = null;</script>