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'

Answer 1

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'))

Answer 2

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          
    }

    ...

 }

Answer 3

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>