delete() - удаление параметра из URLSearchParams

delete() - это метод объекта URLSearchParams, который удаляет параметр из строки запроса.

Он нужен, когда параметр больше не должен попадать в URL: например, пользователь сбросил фильтр, очистил поиск или вернулся на первую страницу каталога.

const params = new URLSearchParams("q=javascript&page=2");

params.delete("page");

console.log(params.toString()); // "q=javascript"

Синтаксис

params.delete(name)

Где name - имя параметра, который нужно удалить.

Метод изменяет текущий объект URLSearchParams и возвращает undefined.

const params = new URLSearchParams("page=2");

const result = params.delete("page");

console.log(result); // undefined
console.log(params.toString()); // ""

Удаление одного параметра

Если параметр есть, delete() удалит его.

const params = new URLSearchParams("q=javascript&page=2&sort=new");

params.delete("page");

console.log(params.toString()); // "q=javascript&sort=new"

Остальные параметры останутся на месте.

console.log(params.get("q")); // "javascript"
console.log(params.get("sort")); // "new"

Если параметра нет, ошибки не будет.

const params = new URLSearchParams("q=javascript");

params.delete("page");

console.log(params.toString()); // "q=javascript"

Удаление повторяющихся параметров

Один и тот же параметр может встречаться в URL несколько раз.

const params = new URLSearchParams("tag=javascript&tag=dom&page=1");

console.log(params.getAll("tag")); // ["javascript", "dom"]

Если вызвать delete() по имени, будут удалены все значения с этим именем.

params.delete("tag");

console.log(params.toString()); // "page=1"
console.log(params.getAll("tag")); // []

Это удобно, когда нужно полностью сбросить группу фильтров.

Удаление конкретного значения

В современных браузерах у delete() есть вариант со вторым аргументом.

params.delete(name, value)

Он удаляет только те пары, где совпадает и имя, и значение.

const params = new URLSearchParams("tag=javascript&tag=dom&tag=async");

params.delete("tag", "dom");

console.log(params.toString()); // "tag=javascript&tag=async"

Такой вариант полезен, когда пользователь снял один чекбокс, но остальные выбранные фильтры должны остаться.

Если нужно поддерживать старое окружение, проще собрать параметры заново из нужных значений.

const selectedTags = params
  .getAll("tag")
  .filter((tag) => tag !== "dom");

const nextParams = new URLSearchParams();

for (const tag of selectedTags) {
  nextParams.append("tag", tag);
}

Использование вместе с URL

Чаще всего delete() используют через searchParams у объекта URL.

const url = new URL("https://learn-javascript.ru/catalog?category=books&page=3");

url.searchParams.delete("page");

console.log(url.href);
// "https://learn-javascript.ru/catalog?category=books"

Это удобный способ обновить адрес и сохранить остальные параметры.

const url = new URL(
  "https://learn-javascript.ru/catalog?category=books&sort=price&page=4",
);

url.searchParams.delete("page");

console.log(url.href);
// "https://learn-javascript.ru/catalog?category=books&sort=price"

Удаление и пустое значение - разные вещи

Удалить параметр - не то же самое, что установить ему пустую строку.

const params = new URLSearchParams("q=javascript&page=2");

params.set("q", "");

console.log(params.toString()); // "q=&page=2"
console.log(params.has("q")); // true

Параметр q всё ещё существует, просто его значение пустое.

Если параметра не должно быть в URL, используйте delete().

params.delete("q");

console.log(params.toString()); // "page=2"
console.log(params.has("q")); // false

Это особенно важно, если сервер или ваш код различает пустой параметр и отсутствие параметра.

Практический пример: сброс фильтра

Допустим, на странице каталога есть фильтр по категории.

function removeCategoryFilter(currentUrl) {
  const url = new URL(currentUrl);

  url.searchParams.delete("category");
  url.searchParams.set("page", "1");

  return url.href;
}

console.log(
  removeCategoryFilter(
    "https://learn-javascript.ru/catalog?category=books&sort=new&page=3",
  ),
);
// "https://learn-javascript.ru/catalog?sort=new&page=1"

Здесь категория удаляется, а страница сбрасывается на первую.

Практический пример: очистка пустых параметров

Иногда параметры собираются из формы, и пустые значения лучше не добавлять в URL.

const url = new URL("https://learn-javascript.ru/search?q=&sort=new&page=1");

for (const [name, value] of url.searchParams) {
  if (value === "") {
    url.searchParams.delete(name);
  }
}

console.log(url.href);
// "https://learn-javascript.ru/search?sort=new&page=1"

Так адрес остаётся короче и понятнее.

Частые ошибки

Думать, что delete() удалит только первое значение

const params = new URLSearchParams("tag=javascript&tag=dom");

params.delete("tag");

console.log(params.toString()); // ""

При вызове delete("tag") удаляются все параметры с именем tag.

Подменять удаление пустым значением

const params = new URLSearchParams("q=javascript");

params.set("q", "");

console.log(params.toString()); // "q="

Если параметр должен исчезнуть из URL, используйте delete().

params.delete("q");

Быстрая памятка

delete() удаляет параметр из URLSearchParams
метод принимает имя параметра
delete(name) удаляет все значения с таким именем
если параметра нет, ошибки не будет
метод изменяет текущий объект и возвращает undefined
удаление отличается от пустого значения
для проверки после удаления можно использовать has()
с полным адресом удобно работать через url.searchParams.delete(...)
в современных браузерах можно удалить конкретную пару через delete(name, value)

Коротко

delete() нужен, чтобы убрать query-параметр из URLSearchParams. При вызове с одним именем он удаляет все значения этого параметра, поэтому хорошо подходит для сброса фильтров, поиска, пагинации и других частей URL, которые больше не должны участвовать в запросе.