javascript - 调用函数前如何使div清晰？

Question

因此，我在 cloud fireStore 中创建了一个数据库，其中包含包含文档（每个国家/地区的城市）的国家/地区集合，还创建了一个函数，它向我显示带有城市列表的特定集合。当用户登录网络应用程序时，用户必须选择国家和城市，然后用户将看到特定国家的城市列表。

这是问题所在。当我调用 functionshowUkraine()时，我得到了乌克兰城市的列表，之后当我调用 function 时showPoland()，我得到了乌克兰之后的波兰城市列表，但我想清除乌克兰城市并且只有波兰语。

这是代码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);

}

标签： javascripthtmldom

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();
    }
}