如何删除多个 url 参数

Question

There is a problem with deleting several string parameters. Only the last parameter is being deleted now.

upd : I did not specify that I wanted to achieve the ability to remove specific parameter values

this code does not work correctly:

const updateFiltersSearchParams = (paramKey, newValue) => {
    const isParamExist = searchParams.getAll(paramKey).includes(newValue);

    if (!isParamExist) {
      searchParams.append(paramKey, newValue);
      setSearchParams(searchParams);
    } else {
      const updatedSearchParams = new URLSearchParams(
        [...searchParams].filter(
          ([key, value]) => key !== paramKey || value !== newValue
        )
      );
      setSearchParams(updatedSearchParams);
    }
  };

const handleDeleteParams = () => {
    [...checkboxParams].forEach((param) => {
      updateFiltersSearchParams("selected", param);
    });
  };

Sandbox

Answer 1

change your handleDeleteParams function with this

const handleDeleteParams = () => {
  setSearchParams([]);
};

Answer 2

If you want to delete * only the selected ( or any specific queryString key ) queryString parameters you can use the delete method of the URLSearchParams object, then enqueue the params URL update.

const handleDeleteParams = (key) => {
  searchParams.delete(key);
  setSearchParams(searchParams);
};

...

<button type="button" onClick={() => handleDeleteParams("selected")}>
  Clear all "selected" params
</button>

Answer 3

Solved the problem by modifying the function like this

const toggleSearchParams = (params) => {
    const newSearchParams = [...searchParams];

    for (const prevParam of params) {
      const index = newSearchParams.findIndex(
        (newParam) =>
          prevParam[0] === newParam[0] && prevParam[1] === newParam[1]
      );

      if (index === -1) {
        newSearchParams.push(prevParam);
      } else {
        newSearchParams.splice(index, 1);
      }
    }

    setSearchParams(new URLSearchParams(newSearchParams));
  };

  const handleChangeCheckBoxValue = (e) => {
    toggleSearchParams([["selected", e.target.value]]);
  };

  const handleDeleteParams = () => {
    toggleSearchParams(checkboxParams.map((param) => ["selected", param]));
  };