<\/span><\/h2>\n\nTo clear a query string value in JavaScript, follow these steps:<\/b>\n<\/p>\n<\/p>\n- Retrieve the current URL using the
window.location<\/code> object.<\/li>\n<\/p>\n
- Split the URL into the base URL and the query string using the
split()<\/code> method.<\/li>\n<\/p>\n
- Remove the unwanted query string parameter from the query string array by filtering out the desired key-value pair.<\/li>\n
<\/p>\n
- Join the modified query string array back into a string using the
join()<\/code> method.<\/li>\n<\/p>\n
- Construct the new URL by combining the base URL and the modified query string.<\/li>\n
<\/p>\n
- Finally, set the updated URL using the
window.location.href<\/code> property.<\/li>\n\n<\/ol>\n
\nNow let’s illustrate this process with an example:\n<\/p>\n
function clearQueryStringValue(key) {
\n const urlString = window.location.href;
\n
\n const url = new URL(urlString);
\n const params = new URLSearchParams(url.search.slice(1));
\n
\n params.delete(key);
\n
\n url.search = params;
\n
\n const newUrlString = url.toString();
\n
\n window.location.href = newUrlString;
\n}
\n
\n\/\/ Example Usage
\nclearQueryStringValue('page');<\/code><\/pre>\n\nThe clearQueryStringValue<\/code> function takes the query string key that you want to remove as a parameter. Once executed, it removes the specified key-value pair from the URL’s query string and redirects to the updated URL.\n<\/p>\n