How to hide an element by Id with mutation observer

Question

I've read https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/ but still not sure how to configure to achieve my objective.

There's an element on a page being generated by a code generator (so I cannot prevent the bevahiour). The element has an id "myid" and I just need to hide it once it displays in the browser. My challenge is how to configure the observer such that the code fires when the element is displayed.

I've inserted my questions as comments where I think I need the help here but kindly guide me if I've got it all wrong:

 var target = document.querySelector('#myid'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // how do I detect when the element is now on the page so that the next statement makes sense? document.getElementById("myid").style.visibility = "hidden"; }); }); // what change do I need to make here? var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); observer.disconnect(); 

Answer 1

Why don't you simply use CSS? That way you don't have to worry about when the item is created at all, you won't need a script do begin with.

#myid {
  visibility: hidden; /*!important; if necessary*/
}