How to remove a parameter from a url?

Question

I have used the following code so I can add multiple parameter to a url

    <script>
        function setParam(name, value) {
            var l = window.location;

            /* build params */
            var params = {};        
            var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;        
            var s = l.search;
            for(var r = x.exec(s); r; r = x.exec(s))
            {
                r[1] = decodeURIComponent(r[1]);
                if (!r[2]) r[2] = '%%';
                params[r[1]] = r[2];
            }

            /* set param */
            params[name] = encodeURIComponent(value);

            /* build search */
            var search = [];
            for(var i in params)
            {
                var p = encodeURIComponent(i);
                var v = params[i];
                if (v != '%%') p += '=' + v;
                search.push(p);
            }
            search = search.join('&');

            /* execute search */
            l.search = search;
        }
    </script>

<a href="javascript:setParam('priceMin', 300);">add priceMin=300</a>

<a href="javascript:setParam('priceMin', 600);">add priceMin=600</a>

<a href="javascript:setParam('MaxDistance', 300);">add MaxDistance=300</a>

This is taken from question: How to add a parameter to the URL?

However what additional script would need to be added so if you clicked on the same hyperlink again it would remove the parameter in the url? In this case being '?priceMin=300'

What did you try so far? – Prerak Sola Oct 16 '19 at 08:48 — Prerak Sola, Oct 16 '19 at 08:48

kumaran · Answer 1 · 2019-10-16T13:04:49.343

Javascript already have URL objects.you can append the param if you want something like this.

 const newUrl = new URL(window.location.href);

function setParam(name, value, option = 'add') {
    var paramexist = newUrl.searchParams.has(name);
    if (option == 'remove') {
        newUrl.searchParams.delete(name);
        return newUrl;
    }
    (!paramexist) ? newUrl.searchParams.append(name, value) : newUrl.searchParams.set(name, value);
    return newUrl;
}

console.log(setParam('priceMin', 300));
console.log(setParam('priceMin', 300,'remove'))

score 0 · Answer 2 · answered Oct 16 '19 at 08:55

0

you can try with adding an if block that would clear the search if it is already there OR allow to add param if the search is empty:

function setParam(name, value) {
    var l = window.location;

    if (l.search) {
      l.search = ''
      return          
    }

    ...

 }

answered Oct 16 '19 at 08:55

Hero Qu

911
9
10

This will not work if there are multiple parameters. Best to use the official `URL` API – TheRealChx101 Sep 09 '21 at 08:44

Olawale Akinseye · Accepted Answer · 2019-10-16T12:30:00.227

Hero Qu's answer will reset the entire list of parameters if you have multiple parameters.

The way to do this is to check if that specific parameter exists then delete it, otherwise add it.

I modified your code below to account for multiple parameter.

<script>
  function setParam(name, value) {
    var l = window.location;

    /* build params */
    var params = {};
    var x = /(?:\??)([^=&?]+)=?([^&?]*)/g;
    var s = l.search;
    for (var r = x.exec(s); r; r = x.exec(s)) {
      r[1] = decodeURIComponent(r[1]);
      if (!r[2]) r[2] = '%%';
      params[r[1]] = r[2];
    }

    /** Check to see if the param exist already
    Delete if it exist, set it, if it doesn't
    **/
    if (params[name] && value == params[name]) {
      delete params[name];
    } else if (params[name] && value != params[name]) {
      delete params[name];
      params[name] = encodeURIComponent(value);
    } else {
      params[name] = encodeURIComponent(value);
    }

    /* set param */

    /* build search */
    var search = [];
    for (var i in params) {
      var p = encodeURIComponent(i);
      var v = params[i];
      if (v != '%%') p += '=' + v;
      search.push(p);
    }
    search = search.join('&');

        /* execute search */``
    l.search = search;
  }
</script>

<a href="javascript:setParam('priceMin', 200);">add priceMin=200</a>
<br />
<a href="javascript:setParam('priceMin', 300);">add priceMin=300</a>
<br />
<a href="javascript:setParam('priceMax', 400);">add priceMax=400</a>

This is very almost there thank you - this works well but what about if I add a second priceMin. Currently with this code clicking a second option will remove it from the url rather than swap it to '?priceMin=400' — Jason Kahl, Oct 16 '19 at 12:05
Then you would have to check if the params value match so as to decide if to delete or delete and replace. Check my updated answer. — Olawale Akinseye, Oct 16 '19 at 12:31

How to remove a parameter from a url?

3 Answers3