I'm utilizing the URLSearchParams API to delete keys/values from the query string in my URL.

I have the following snippet:

params = new URLSearchParams('a=x&b=y&c=z');
params.forEach(function(value, key){
  console.log("Deleted: ", key, value, params.toString());
  params.delete(key);
});
console.log("Left with: ", params.toString());

Invariably, the Left with: returns part of the query parameters.

Output on this JSFiddle:

☁️ "Running fiddle"
"Deleted: ", "a", "x", "a=x&b=y&c=z"
"Deleted: ", "c", "z", "b=y&c=z"
"Left with", "b=y"

My understanding of forEach() is that it'll loop over all the key/value pairs, but based on this fiddle, it looks like it exits the loop on the penultimate pair.

Edit, based on feedback in the ments below:

I'm trying to selectively retain one or two parameters (based on a list provided).

params = new URLSearchParams('a=x&b=y&c=z&d=1');
params.forEach(function(value, key){
  retainList = ['d'];
  if (retainList.includes(key)){
    console.log("Retaining ", key);
  } else {
    console.log("Deleted: ", key, value, params.toString());
    params.delete(key);
  }
});
console.log("Left with: ", params.toString());

I'm utilizing the URLSearchParams API to delete keys/values from the query string in my URL.

I have the following snippet:

params = new URLSearchParams('a=x&b=y&c=z');
params.forEach(function(value, key){
  console.log("Deleted: ", key, value, params.toString());
  params.delete(key);
});
console.log("Left with: ", params.toString());

Invariably, the Left with: returns part of the query parameters.

Output on this JSFiddle:

☁️ "Running fiddle"
"Deleted: ", "a", "x", "a=x&b=y&c=z"
"Deleted: ", "c", "z", "b=y&c=z"
"Left with", "b=y"

My understanding of forEach() is that it'll loop over all the key/value pairs, but based on this fiddle, it looks like it exits the loop on the penultimate pair.

Edit, based on feedback in the ments below:

I'm trying to selectively retain one or two parameters (based on a list provided).

params = new URLSearchParams('a=x&b=y&c=z&d=1');
params.forEach(function(value, key){
  retainList = ['d'];
  if (retainList.includes(key)){
    console.log("Retaining ", key);
  } else {
    console.log("Deleted: ", key, value, params.toString());
    params.delete(key);
  }
});
console.log("Left with: ", params.toString());

• javascript

• 3 The problem here is that you are iterating over an object while you are modifying it. The forEach keeps a position indicator. If you delete position #2, then what was position #3 now bees position #2, but since it thinks it already did #2, it will skip over it. You should build up new parameters with the ones you want to keep. – Tim Roberts Commented Aug 17, 2022 at 19:41
• 1 Consider rephrasing the question in terms of what you actually want to achieve. If you really want to remove all the parameters it's far easier to just do params = new URLSearchParams('') – Tibrogargan Commented Aug 17, 2022 at 19:44

2 Answers 2

Seems to be some odd reference issue happening with URLSearchParams. Even when you use the .keys() method to get a list of keys it seems like it's giving a reference to it's internal list of keys.

You can work around this issue by cloning the list of keys using spread

params = new URLSearchParams('a=x&b=y&c=z');
keys = [...params.keys()]
for (key of keys) {
  console.log("Deleting: ", key, params.get(key), params.toString());
  params.delete(key)
};
console.log("Left with: ", params.toString());

To achieve the desired result you could do:

params = new URLSearchParams('a=x&b=y&c=z&d=1');
retainList = ['d']

for (key of [...params.keys()]) {
  if (! retainList.includes(key)) {
    console.log("Deleting: ", key, params.get(key), params.toString());
    params.delete(key)
  }
};
console.log("Left with: ", params.toString());

Maybe not exactly what OP wants but I just wanted to reset searchParams of a URL and set my own parameters, and the solution was just to do the following:

const url = new URL(location.href);
url.search = ''; // it reset the search params
url.searchParams.set('A', 'a');
url.toString();