does the javascript remove really removed the element

Question

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?

Can you update the question to a runnable minimal reproducible example which demonstrates the problem? It's not really clear to me what specifically you're describing. .remove does indeed remove the element. But your issue could be based on any number of other assumptions you might be making. A demonstration of the problem would help us observe this. — David
– David, Commented Mar 10, 2022 at 18:01
"when remove the parent element, the sub element also removed." - that's expected. "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" - please post the code that does that, we can't help you without a minimal reproducible example — Bergi
– Bergi, Commented Mar 10, 2022 at 18:04
I also want to make a minimal reproduce example but I am developing the google chrome extension, the minimal example will be very complex and need to care so much details(typescript + vue 3).@David — Dolphin
– Dolphin, Commented Mar 10, 2022 at 18:06
Ok, It is really hard to understand what was happen without the minimal reproduce example. I will tried to made a minimal reproduce. that will take me some time to made. When complete, I will update the question. — Dolphin
– Dolphin, Commented Mar 10, 2022 at 18:08

Esdeseserdt · Accepted Answer · 2022-03-10 19:00:59Z

1

Without a minimal reproducable example I can't guarantee this will work, but you are probably setting the display after you made it hidden, which overrides the .remove() / hidden attribute source try setting the display to none instead using

translateBtn.style.setProperty("display","none","important")

which will result in the same user experience as

translateBtn.remove();

but cannot be overidden

answered Mar 10, 2022 at 19:00

Esdeseserdt

3111 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dolphin Over a year ago

I think your answer would work, because the display none will make the html rerender, the hidden did not rerender, and keep the last state of show by default.@Esdeseserdt1976

Collectives™ on Stack Overflow

does the javascript remove really removed the element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related