Clear Links to Current Page with Unobtrusive JavaScript

After reading through how to turn off current page links using CSS on The Man in Blue, I decided to put together a way to accomplish the same using JavaScript.

The technique would be straightforward: loop through all the links on the page and remove the tag if it's the same as the current page. The problem is that the W3C DOM doesn't seem to have a way of removing the current node while retaining all the nodes contained within it. Internet Explorer actually has a removeNode method which does exactly that but I wanted something cross-browser.

It's onto building my own removeNode function. Again, the technique is fairly straightforward in that I loop through all the child nodes of the element I want to remove and insert them as child nodes of the parent element.

Here's the code:

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i<a.length;i++){
        if(a[i].href.split("#")[0] == window.location.href.split("#")[0]){
            removeNode(a[i]);
        }
    }
}

function removeNode(n){
    if(n.hasChildNodes()){
        for(var i=0;i<n.childNodes.length;i++){
            n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);
        }
    }
    n.parentNode.removeChild(n);
}

Then, all we need to do is run the clearCurrentLink function when the onload event of the page fires. I've put together a quick example of the clear current link functionality.

I gave this a run through in IE6, Firefox 1.0, and Opera 7.5 on the PC. Try it out and post your results and suggestions.

Update: As Gabriel mentions in the comments, the previous version didn't take into account anchors; that is, links with the ol' # sign in them. What I've done is take the href and just grab anything before the hash mark, if there is one.

.href.split("#")[0]

The code has been updated on this page and in the example.

LAST update: I thought through the anchor issue and came out with version 2. Feel free to leave a comment on that page.