How to remove variables from links on a page with jQuery

Question

Hi everyone,

Simply I have a bunch of links like so

<div id="categoryLinks">
    <a href="blah.php?something=this&category=21"></a>
    <a href="blah.php?something=that&category=21"></a>
    <a href="blah.php?something=then&category=21"></a>
</div>

What I'd like to be able to do however, is go through all those links and remove the end bit '&category=21' should I choose to so they would all look like:

<div id="categoryLinks">
    <a href="blah.php?something=this"></a>
    <a href="blah.php?something=that"></a>
    <a href="blah.php?something=then"></a>
</div>

So I'm working on the function that looks something like this:

function removeCategory(){

    $('#categoryLinks a').each(function(){

        // as you can see, i don't know what goes in here!   

});


}

I know how to do the opposite, which is to append a category to the href, but as far as taking it off I am drawing a blank.

How do I do this?

Answer 1

This will strip all parameters

$('a[href*=?]').each(function () {
    var href = $(this).attr('href');
    $(this).attr('href', href.substring(0, href.indexOf('?'));
});

This will strip particular one

$("a[href*='category=']").each(function () {
    var href = $(this).attr('href');
    $(this).attr('href', href.replace(/&?category=\d+/, ''));
});

a[href*='category='] looks for an category= string in href attribute of a tag. Then this atrribute along with coresponding value is replaced with empty string.