hide divs using javascript

Question

I would like to hide divs that have no ids associated with them using javascript. For example, in sharepoint .ms-globalbreadcrumb doesn't have an id.

frame = document.getElementById('frame1'); 
frame.contentWindow.document.getElementById('ctl00_PlaceHolderGlobalNavigation_PlaceHolderGlobalNavigationSiteMap_GlobalNavigationSiteMap').style.display='none';

The above code works for pieces that have ids but I am not sure how to achieve this for other divs with no ids.

Thanks,

sje397 · Accepted Answer · 2011-05-19 12:46:25Z

1

You would make your life a lot easier using something that normalizes access to the DOM, so that the same code (for everything - forms, events, object properties, etc etc) works across all browsers. Using JQuery it's just:

$('div').hide();

to hide all divs...and there are a huge range of 'selectors' to refine your selection.

answered May 19, 2011 at 12:46

sje397

41.9k9 gold badges90 silver badges106 bronze badges

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

Comments

Gabriele Petrioli · Accepted Answer · 2011-05-19 13:06:35Z

1

Case 1
If you want to hide all divs with no id then you would have to loop all divs and hide them based on that criteria. (find the divs with the .getElementsByTagName())

var alldivs = document.getElementsByTagName('div');
for( var i = 0; i < alldivs.length; i++) {    
       alldivs[i].style.display = "none";
    }

Case 2
If you want to find elements based on a class, like in your example the .ms-globalbreadcrumb then (find the elements with the class with the .getElementsByClassName())

var allbyclass = document.getElementsByClassName('ms-globalbreadcrumb');
for( var i = 0; i < allbyclass.length; i++) {    
       allbyclass[i].style.display = "none";
    }

(the getElementsByClassName will not work for pre IE9 versions of IE)

example with both cases at http://jsfiddle.net/gaby/H3nNr/

suggestion

Use jQuery which allows for a wide variety of selectors and complex traversing of the DOM to find what you want..

Case 1 in jQuery would be $('div:not([id])').hide();
Case 2 in jQuery would be $('.ms-globalbreadcrumb').hide();

edited May 19, 2011 at 13:06

answered May 19, 2011 at 12:48

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

3 Comments

elmander Over a year ago

I am using jquery 1.5.1 min js using the code you provided it does not seem to hide it. Any ideas why?

Gabriele Petrioli Over a year ago

@elmander, i had an error in the jquery examplew. The case 1 example would hide all divs, not those without id. Now i fixed it to only select those without id.

Gabriele Petrioli Over a year ago

@elmander, also make sure you are dealing with divs, as we are specifically targeting those in the examples. If the elements in the dom are span it will not select them.

James · Accepted Answer · 2011-05-19 12:45:26Z

0

If you can locate the divs in the DOM, then you should be able to hide them. For example, if a parent / grandparent etc div has an ID, you can go down the DOM tree using Javascript until you have found the element you want to hide.

var elem = document.getElementById("topelement");
var elem2 = elem.firstChild.firstChild;
elem2.style.display = "none";

JQuery has lots of selectors for making this kind of thing easy.

answered May 19, 2011 at 12:45

James

13.5k1 gold badge19 silver badges19 bronze badges

Comments

megakorre · Accepted Answer · 2011-05-19 12:50:38Z

0

so theres other methods you can use you can get them by tagname or classes

 document.getElementsByClassName
 document.getElementsByTagName

they return list of elements you need to iterate threw

so your example shud be

var ellements = frame.contentWindow.document
   .getElementsByClassName("ms-globalbreadcrumb");
for(i in ellements) {
  ellements[i].style.display = "none";
}

answered May 19, 2011 at 12:50

megakorre

2,22316 silver badges23 bronze badges

Collectives™ on Stack Overflow

hide divs using javascript

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related