Question

I have text on a page, its in a <h3> tag, which has a class ms-standardheader, but there are other texts on the page with the same class in its own <h3> tag. I also know the text I want to hide is ‘Session’.

With this how can I write a javascript function to hide only this text?

Here is an image of the developtools from IE.

Answer 1

I’d suggest, if you’re restricted (as your tags suggest) to non-library plain JavaScript, the following:

var h3s = document.getElementsByTagName('h3'),
    classedH3 = [];

for (var i = 0, len = h3s.length; i < len; i++) {
    if (h3s[i].className.indexOf('ms-standardheader') > -1) {
        classedH3.push(h3s[i]);
    }
}

for (var i = 0, len = classedH3.length; i < len; i++) {
    if (classedH3[i].firstChild.nodeValue == 'the text to hide'){
        classedH3[i].style.display = 'none';
    }
}​

JS Fiddle demo.

References:

• push().
• document.getElementsByTagName().
• element.className.
• node.nodeValue.
• indexOf().