Hide an element's next sibling with Javascript

javascript element hide siblings
DisgruntledGoat picture DisgruntledGoat · May 15, 2009 · Viewed 40.9k times · Source

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.

Answer

Russ Cam picture Russ Cam · May 15, 2009

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';

Related questions

Deleting array elements in JavaScript - delete vs splice

What is the difference between using the delete operator on the array element as opposed to using the Array.splice method? For example: myArray = ['a', 'b', 'c', 'd']; delete myArray[1]; // or myArray.splice (1, 1); Why even have the splice method if …

Read More
How can I check if an element exists in the visible DOM?

How do you test an element for existence without the use of the getElementById method? I have set up a live demo for reference. I will also print the code on here as well: <!DOCTYPE html> <html&…

Read More
Getting DOM element value using pure JavaScript

Is there any difference between these solutions? Solution 1: ...and Solution 2: function doSomething(id) { var value = document.getElementById(id).value; console.log(value); //... } <input id="theId" value="test" onclick="doSomething(this.id)" />

Read More