variable turns to undefined inside a for loop

I'm am battling with a javascript function I'm working on.

Inside a for loop I'm iterating all elements with class "visible", inside that loop I'm preforming two actions.

1. elements[i].removeAttribute("class");
2. elements[i].setAttribute("class", "hidden");

For some reason only 1 is valid. 2 produces an error saying:

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

Even when I log elements[i] using console.log; after the first console.log call the element exists, but on the second console.log elements[i] is 'undefined'

What the hell am I missing here, this is driving me crazy, if my laptop wasn't so expensive it would have been broken by now. Help :(

Here's the function:

function hide_visable_elements()
{
    // remove body EventListener
    var body = document.getElementsByTagName("body");
    body[0].removeEventListener("click", hide_visable_elements, true);

    var elements = document.getElementsByClassName("visible");

    for (var i = 0; i < elements.length; i++)
    {
        console.log(elements[i]); // Works like a swiss clock

        elements[i].removeAttribute("class"); 

        console.log(elements[i]); // why elements[i] is 'undefined' now ???

        elements[i].setAttribute("class", "hidden"); // << turns to useless code
    }
}