Take the 2-minute tour ×

I have an element grabbed from document.getElementById('the_id'). How can I get its next sibling and hide it? I tried this but it didn't work:

elem.nextSibling.style.display = 'none';

Firebug error was elem.nextSibling.style is undefined.

share|improve this question
add comment

4 Answers

up vote 32 down vote accepted

it's because Firefox considers the whitespace between element nodes to be text nodes (whereas IE does not) and therefore using .nextSibling on an element gets that text node in Firefox.

It's useful to have a function to use to get the next element node. Something like this

   Credit to John Resig for this function 
   taken from Pro JavaScript techniques 
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType !== 1);
    return elem;        

then you can do

var elem = document.getElementById('the_id');
var nextElem = next(elem); 

if (nextElem) 
    nextElem.style.display = 'none';
share|improve this answer
But elem still might be null. –  Gumbo May 15 '09 at 12:36
No it doesn’t. It just guaratees that nextSibling is not accessed when elem is “not true” or elem.nodeType == 1. But if there isn’t such an element, elem is just the last sibling node regardless of what type it is. –  Gumbo May 15 '09 at 12:41
Here’s an example: var elem = document.createElement("div"); elem.appendChild(document.createTextNode("foo")); elem.appendChild(document.createTextNode("bar")); alert(next(elem.firstChild) === null); // "true" –  Gumbo May 15 '09 at 12:48
@Gumbo - apologies, you're right, will update now –  Russ Cam May 15 '09 at 12:48
Thanks, this worked perfectly! –  DisgruntledGoat May 15 '09 at 17:02
show 2 more comments

Take a look at the Element Traversal API, that API moves between Element nodes only. This Allows the following:

elem.nextElementSibling.style.display = 'none';

And thus avoids the problem inherent in nextSibling of potentially getting non-Element nodes (e.g. TextNode holding whitespace)

share|improve this answer
TY TY TY TY for adding this answer! –  Alisso May 1 '13 at 11:38
add comment

Firebug error was elem.nextSibling.style is undefined.

because nextSibling can be a text-node or other node type

do {
   elem = elem.nextSibling;
} while(element && elem.nodeType !== 1); // 1 == Node.ELEMENT_NODE
if(elem) elem.style.display = 'none';
share|improve this answer
+1 For checking if elem is not null before accessing the style attribute. –  Gumbo May 15 '09 at 12:37
add comment

Try looping through the children of this element using something like:

var i=0;
(foreach child in elem)
   if (i==0)

Please make appropriate corrections to the syntax.

share|improve this answer
add comment

Your Answer


