I have some filters that are being displayed as checkboxes on my website. Each time someone checks or unchecks one of these inputs I either want to add or remove the filter to/from the URL. I have this mostly working, but the problem comes when removing the last filter in the list.

Here's an example:

```js
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

$(function () {
    var colors = getUrlParameter('colors');
    var currentUrl = location.href;

    $('input[type="checkbox"]').change(function () {
      var inputVal = $(this).val();

      if (this.checked) {
        // Add filter to URL params
        colors = getUrlParameter('colors');
        if (!colors) {
          // No filters exist yet
          currentUrl += '?colors=' + inputVal;
        } else {
          // At least one filter exists
          currentUrl += ',' + inputVal;
        }
        console.log(currentUrl);
        window.history.pushState("object or string", "Title", currentUrl);
      } else {
        // Remove filter from URL params
        currentUrl = currentUrl.replace(inputVal + ',', '');
        console.log(currentUrl);
        window.history.pushState("object or string", "Title", currentUrl);
      }
    });
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <label><input type="checkbox" value="blue" />Blue</label>
  <label><input type="checkbox" value="red" />Red</label>
  <label><input type="checkbox" value="green" />Green</label>
</div>
```

This works if the color is first(if there or other filters) or in the middle of the list of filters, since it matches my `replace()`, wondering how I can do this dynamically so that it will remove both the color and the comma if necessary or remove the `colors=` altogether if none are checked.

For example, if all 3 colors are checked the url would look like this:

```
http://example.net?colors=blue,red,green

```

If you then remove `blue` it should look like this:

```
http://example.net?colors=red,green

```

If you then remove green it would look like this:

```
http://example.net?colors=red

```

And finally, removing red would look like this:

```
http://example.net

```