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.

Published November 18, 2004 · Updated September 17, 2005
Categorized as JavaScript
Short URL: https://snook.ca/s/290

Conversation

4 Comments · RSS feed
Gabriel Mihalache said on November 18, 2004

Does the href attribute of a returns the absolute path of what acually you put there? In the case of the original value being kept, relative paths won't match the absolute URI.

What about targets? Does window.location.href returns the anchor too?

Jonathan Snook said on November 18, 2004

The href seems to return the full resolved path. So if the href value in html was "index.html", grabbing it via script seems to return "http://www.example.com/index.html". Which works really well.

I just tested anchors and no, it doesn't remove links when the anchors don't match. When I have a chance, I'll look to extend it with anchor checking.

Gabriel Mihalache said on November 18, 2004

Actually... I think you might want to keep local links with anchors. Otherwise, you'd disable the regular "go to top" or "skip to content" links.

What you want to do is remove all links to this page, EXCEPT those pointing to a different target (assuming that window.location.href returns the current target too, if any)

I propose:
if (href.split[0] != this_page.split[0]) {
leave it be
} else if (href.split[1] != this_page.split[1]) {
leave it be
} else {
remove it
}

pardon my pseudo-code.

Scott said on November 18, 2004

Other than the potential issue that Gabriel mentioned, this looks like an excellent tool. I'll be implementing it when everything's sorted.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.