How to disable div blocks with a specific id pattern?

Question

I would like to write a greasemonkey script to disable the div on a specific page. For any given page load, I don’t know where the div will be in the DOM, but I know that it is always called <div id = "alertPanel"> ....</div>

How can I turn off this div?

My thoughts were something like:

 var myDivs= document.getElementsByTagName('div'); for (i=0; i<myDivs.length; i++) { if (myDivs[i].<get id property somehow> = "alertPanel") myDivs[i].style.visibility = 'hidden'; } 

but as you can tell, I'm stuck in accessing the id property to check for equality.

By the way, I use a text editor to write this - I assume that the standard javascript editor will provide an autocomplete list after entering into myDivs[i].

Answer 1

If it has id , you can use document.getElementById :

 var div = document.getElementById("alertPanel"); 

Then, if it exists, you can either remove it (possibly a bad idea) or hide it:

 if (div) { div.style.display = "none"; // Hides it // Or // div.parentNode.removeChild(div); // Removes it entirely } 

Refresh . Repeat your answer to another answer:

thanks for your reply. Your statemt applies to the page with iframes too. This question is in the iframe. I tried ypur solution and it didn't work. perhaps a link to the page will help: tennis.betfair.com the div I want to disable is the one that has id: minigamesContainer

If the element is in an iframe , then you should call getElementById in the document, which is in the iframe , since iframe are separate windows and have separate documents. If you know the id for the iframe , you can use document.getElementById to get the iframe instance, then use the contentDocument to access its document, and then use getElementById to get the "minigamesContainer":

 var iframe, div; iframe = document.getElementById("the_iframe_id"); if (iframe) { try { div = iframe.contentDocument.getElementById("minigamesContainer"); if (div) { div.style.display = "none"; } } catch (e) { } } 

( try/catch exists due to a potential security error accessing the contents of the iframe, I don’t know Greasemonkey well enough to find out if SOP applies to it. I am inclined to assume that this is not so, but it’s better safe ...)

If you don’t know the iframe id or if you don’t have one, you can just view all of them by getting their document.getElementsByTagName , and then the loop:

 var iframes, index, iframe, div; iframes = document.getElementsByTagName("iframe"); for (index = 0; index < iframes.length; ++index) { iframe = iframes[index]; try { div = iframe.contentDocument.getElementById("minigamesContainer"); if (div) { div.style.display = "none"; break; } } catch (e) { } } 

Literature:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs

Answer 2

In live HTML, you can only have an element with a specific ID. So:

 document.getElementById('alertPanel').style.visiblity = 'hidden'; 

But if you still need to iterate over all divs and check their identifiers, then this should work:

 if (myDivs[i].id == "alertPanel") myDivs[i].style.visibility = 'hidden';