javascript - Removing contents from overlay from JS inside then

Question

this is my first post. I am a trainee engineer. I have been trying to remove a div tag inside another one after it is used. I am making a simple data retrieval from firestore and show the data fetched as overlay. It is working for the first retrieval. When I recall the same function, data inside previous overlay is not removed. Is there any way to do so? Code is given below:

    function viewUploads(username, blogContainer, overLay){
    /*if(blogContainer.contains(document.getElementById('iBlog'))){
        blogContainer.parentNode.removeChild(blogContainer);
        blogContainer.remove()
        //console.log(blogContainer)*/

    overLay.style.display = "block"
    overLay.innerHTML = ""
    blogs.where("name","==", username)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            var container = document.createElement("div");
            container.classList.add("single-blog")
            container.innerHTML = `${doc.data().blog} at ${doc.data().time}`;
            container.setAttribute("id", "iBlog")
            blogContainer.appendChild(container)
        });
  
.then(()=>{
        overLay.appendChild(blogContainer)
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
   
    }   
    setTimeout(function(){
        overLay.style.display = "none"
    }, 4000);
} 

I want to remove the blogContainer from overLay child after time out happens. I tried element.remove() and other functions inside and outside the viewupload() function, still the new blogConatiner appeds with overLay object without removing the old.

Please help! Thanks in advance.

question from:https://stackoverflow.com/questions/65623670/removing-contents-from-overlay-from-js-inside-then

Answer 1

Waitting for answers