SharePoint CEWP Javascript works on IE8, but not Chrome or Firefox

Question

I have some Javascript in a CEWP on a custom item display form that works fine with IE8, but not with Chrome or Firefox. The script is to hide select menu items from the display menu (mostly interested in the 'workflows' button, but also the 'New Item'). Below is one of the two scripts I tried. If anyone has any idea as to why this would work in IE8, but not the other browsers, it would be appreciated.

One Update, the first menu item is removed (like 'New Item'), while the second is not in both Chrome and Firefox. Also...I found this script on another SharePoint blog, but did not receive an answer from the author.

hideFormMenuItems("New Item","Alert Me");

function hideFormMenuItems()
{       

    var titleToHide="";
    var anchorTag;
    var allAnchorTags = document.getElementsByTagName('a');
    for(var i = 0; i < hideFormMenuItems.arguments.length; i++ ) 
    {   
        titleToHide = hideFormMenuItems.arguments[i];           
        if(titleToHide!='Alert Me')
        {

            for (var j = 0; j < allAnchorTags.length; j++)
            {
                anchorTag= allAnchorTags[j];                

                    if (anchorTag.title.indexOf(titleToHide)!=-1)
                    {                                               

                         anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
                         anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling.style.display="none";                     
                         break;
                    }

            }
        }
        else
        {
            for (var k=0; k < allAnchorTags.length;k++)
            {
                anchorTag= allAnchorTags[k];                


                    if (anchorTag.id.indexOf("SubscribeButton")!=-1)
                    {       
                         anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
                         break;
                         //anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.style.display="none";                       
                    }
            }

        }
    }

    var allSpanTags = document.getElementsByTagName("span");        
    var spanTag;
    var toolbarRow;
    var lastCell;
    for(var m=0; m < allSpanTags.length;m++)
    {
        spanTag = allSpanTags[m];

            if(spanTag.id=='part1')
            {
                toolbarRow = spanTag.childNodes[2].firstChild.firstChild;
                lastCell = toolbarRow.lastChild.previousSibling                 
                while(lastCell.style.display=='none')
                {                                           
                        lastCell = lastCell.previousSibling;                                            
                }   
                if(lastCell.innerText == '|')
                {                   lastCell.style.display='none';                          
                }                   
                break;                  
            }
    }
}

Answer 1

Dom Traversal and Selectors between the browsers is a extremly contentious issue at the moment. Microsoft , Google, Safari, Mozilla, all have their own way of trying to do things.

This causes a nightmare of issues for us developers.

Luckily, the guys at Jquery has written a Javascript library which works on ALL Browsers.

So, to cut short on a long story, I suggest you use Jquery to hide the content you wish to hide.

Like so:

$('#IDOFELEMENTTOHIDE').hide();

OR

$('.CSSCLASSNAMEOFELEMTNTOHIDE').hide();

Read more on Jquery here: http://jquery.com/

Hope this helps