I have a popup window and I am setting the window hidden in css like this when initial the window:

#popper-container1 {
  width: 250px;
  max-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  touch-action: none;
  transition: opacity 0.2s;
  background-color: #f5f8fa;
  visibility: hidden;
}

after click some button, show this window using js code like this:

export async function showTranslateResultPanel(translation: string) {
  let translateBtn = document.getElementById("popper-container1");
  if (translateBtn) {
    translateBtn.style.visibility = "visible";
    translateBtn.style.zIndex = "999999999";
    translateBtn.style.position = "absolute";
    let xAxios = await LocalStorage.readLocalStorage("pop-window-x-axios");
    let yAxios = await LocalStorage.readLocalStorage("pop-window-y-axios");
    translateBtn.style.transform = "translate(" + (xAxios) + "px," + (yAxios) + "px)";
    setTransResult(translation);
  }
}

When the user close the popup window, I am using this code the remove the elment:

export function closePopupWindow() {
  let translateBtn = document.getElementById("reddwarf-translate-app");
  if (translateBtn) {
    translateBtn.remove();
  }
}

the reddwarf-translate-app was the parent element of popper-container1, when remove the parent element, the sub element also removed. But I am facing the problem is that when the next time initial the popup window, the window was showing by default, the hidden was override! why did this happen? what should I do to make it work? I check my code and logic and did not found any problem, why the hidden did not make effect when the sencond time open the popup window? does the remove function really delete the element? or did not remove the css?