How remove page message?

Question

I'm trying to remove a message from a page, but I can only execute my code only when this message is displayed. How can I do this? Is it more appropriate to remove by the event listener as well?

The function is this:

function removeWindow(){
  document.querySelector(".content_form").remove();
  document.querySelector(".pop").style.background = 'transparent';
  document.querySelector(".footer").remove();
}

Thanks in advance!

Answer 1

If you're looking for a way to "watch" the DOM until these mount you'd need to use a MutationObserver.

But you could do this a lot easier by just adding one line of CSS.

.pop { display: none; }

---

Even if it has to be written in JavaScript just add the CSS rule with JavaScript and don't worry about timing.

Answer 2

You can use window.setInterval to constantly check if the element is there until it appears and you remove it:

function removeWindow() {
  const contentForm = document.querySelector(".content_form");

  console.log('Checking...');

  if (!contentForm) return;

  contentForm.remove();
  document.querySelector(".pop").style.background = 'transparent';
  document.querySelector(".footer").remove();

  // Stop polling as we have already removed it:
  clearInterval(intervalID);

  console.log('GONE!');
}

// Start polling, once every second:
const intervalID = setInterval(removeWindow, 1000);

Answer 3

You can set important style on "pop" container to prevent come over on the screen. Since js can't find elements until page loads, CSS will always work. hope this can be helpful to you.

• With styles :

.PD-V2.anonymous .register_file .pop{
 top: 100% !important
}