Remove a parameter to the URL with JavaScript

Question

Original URL:

http://yourewebsite.php?id=10&color_id=1

Resulting URL:

http://yourewebsite.php?id=10

I got the function adding Param

function insertParam(key, value){
    key = escape(key); value = escape(value);
    var kvp = document.location.search.substr(1).split('&');
    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
            x[1] = value;
            kvp[i] = x.join('=');
            break;
        }
    }
    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    document.location.search = kvp.join('&'); 
}

but I need to function to remove Param

Just a sidenote - you didn' open the curly,brackets after declaring your function. — jdepypere, Jun 05 '13 at 13:25
We need more details: remove based on what? Only the last? Based on the key? — Shadow The GPT Wizard, Jun 05 '13 at 13:28
If you only want the first parameter (id), you could `split("&")[0];` — tymeJV, Jun 05 '13 at 13:29
Thanks for the reply guy. I got the code from this question here- http://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript. And I just want to reverse the code to remove the adding parameter url. I not good in javascript. — Jows, Jun 05 '13 at 13:39
In the same question there is a class which can also remove parameters: http://stackoverflow.com/a/487103/1266242 — David Mulder, Jun 05 '13 at 13:46
An easy way to get this is: "http://yourewebsite.php?id=10&color_id=1".split("?")[0] — Hax0r, Jan 08 '19 at 11:07

score 118 · Accepted Answer · edited Feb 05 '21 at 10:18

118

Try this. Just pass in the param you want to remove from the URL and the original URL value, and the function will strip it out for you.

function removeParam(key, sourceURL) {
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        if (params_arr.length) rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

To use it, simply do something like this:

var originalURL = "http://yourewebsite.com?id=10&color_id=1";
var alteredURL = removeParam("color_id", originalURL);

The var alteredURL will be the output you desire.

Hope it helps!

edited Feb 05 '21 at 10:18

answered Jun 05 '13 at 13:50

Anthony Hessler

1,459
1
11
10

2

Wow!Thanks. It really help's me. Thanks a lot. – Jows Jun 05 '13 at 14:00
6

if it strips all parameters, you would want to not use this line: rtn = rtn + "?" + params_arr.join("&"); you'd want to test if params_arr.length > 0 first. – oknate Sep 04 '14 at 16:19
You may look in the other answer i edited to push your new url directly to the url bar . – echo_Me Feb 26 '15 at 06:35
4

nice. Altered it with simple checking in the end for params_arr length, so we don't get "?" if there are no more get params left. Like so: if (params_arr.length > 0) { rtn = rtn + "?" + params_arr.join("&"); } – Paul Walczewski Jan 15 '17 at 15:05
here negative loop is intentional, `for (var i = params_arr.length - 1; i >= 0; i -= 1) {` it will remove if parameter is include multiple times. – Dharmang Sep 25 '18 at 10:37
doesn't work well when having multiple params – Aboozar Rajabi Jul 23 '20 at 11:32
a good function, but it also cuts ancor, if it goes after removed parameter, for example, if we have a link like www.site.com/index.php?a=1&b=2#ancor, while cutting the "b" parameter ancor will be also removed. How we can avoid this? – creators Nov 17 '21 at 22:04

score 16 · Answer 2 · edited Feb 26 '15 at 06:34

16

function removeParam(parameter)
{
  var url=document.location.href;
  var urlparts= url.split('?');

 if (urlparts.length>=2)
 {
  var urlBase=urlparts.shift(); 
  var queryString=urlparts.join("?"); 

  var prefix = encodeURIComponent(parameter)+'=';
  var pars = queryString.split(/[&;]/g);
  for (var i= pars.length; i-->0;)               
      if (pars[i].lastIndexOf(prefix, 0)!==-1)   
          pars.splice(i, 1);
  url = urlBase+'?'+pars.join('&');
  window.history.pushState('',document.title,url); // added this line to push the new url directly to url bar .

}
return url;
}

This will resolve your problem

edited Feb 26 '15 at 06:34

echo_Me

37,078
5
58
78

answered Jun 05 '13 at 13:57

Arun Chandran Chackachattil

3,356
7
31
45

Have combined the window.history.pushState with the replacement from http://stackoverflow.com/a/7171293/2067690 - works well. – HumanInDisguise Jun 03 '15 at 09:42
2

I'd use document.location.search instead of just splitting, and it needs something like this added to preserve hash if (document.location.hash) { url = url + document.location.hash; } – Cameron Oct 12 '15 at 07:40
1

I would use `replaceState` instead of `pushState`. It's a matter of opinion, but I don't think that removing a parameter from the url should be a new history state. – pmrotule Feb 02 '18 at 08:32
This seems more easy way to do https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/delete – sk8terboi87 ツ Sep 24 '21 at 07:10

Remove a parameter to the URL with JavaScript

2 Answers2

Linked