Remove Button

В библиотеке Tom Select механизм удаления выбранных значений реализован через отдельный плагин remove_button, который добавляет интерактивную кнопку удаления непосредственно в каждый выбранный элемент (item). Этот компонент работает как часть системы рендеринга выбранных значений и интегрируется в цикл управления состоянием селекта.

Основная задача кнопки удаления — обеспечить быстрый и предсказуемый способ исключения элемента из текущего набора выбранных значений без необходимости повторного открытия выпадающего списка.

Подключение плагина remove_button

Плагин активируется при инициализации экземпляра Tom Select через опцию plugins. В базовом варианте подключение выглядит следующим образом:

new TomSelect("#select", {
  plugins: ["remove_button"]
});

При такой конфигурации каждый выбранный элемент в режиме multiple получает встроенную кнопку удаления.

Плагин не требует дополнительной установки или импорта, если используется стандартная сборка Tom Select, где он уже включён в пакет.

Поведение в режиме multiple и single

Плагин remove_button работает преимущественно в многозначных селектах:

multiple: true — кнопка удаления отображается у каждого выбранного элемента
multiple: false — кнопка не используется, поскольку в интерфейсе отсутствует набор выбранных элементов

В однозначных селектах удаление значения происходит через выбор другого элемента или очистку текущего значения, поэтому визуальная кнопка удаления там не применяется.

Внутренний механизм удаления элемента

При нажатии на кнопку удаления происходит цепочка операций:

Перехват клика по элементу .remove
Определение связанного значения item
Вызов внутреннего метода удаления значения из коллекции
Обновление состояния select
Перерисовка UI (re-render выбранных элементов)
Синхронизация с оригинальным <select>

Удаление инициирует обновление внутреннего массива items, который хранит текущие выбранные значения. После этого Tom Select пересчитывает состояние и обновляет DOM.

Конфигурация remove_button

Плагин поддерживает параметрическую настройку через объект конфигурации внутри plugins.

new TomSelect("#select", {
  plugins: {
    remove_button: {
      title: "Удалить"
    }
  }
});

Основные параметры:

title — текст всплывающей подсказки при наведении на кнопку удаления
label (в некоторых сборках/форках) — текст или aria-метка для доступности

Этот параметр влияет только на UI-слой и не изменяет логику удаления.

Рендеринг выбранного элемента с кнопкой удаления

Каждый выбранный элемент в DOM представлен структурой, которая формируется через renderer Tom Select. При включённом remove_button внутренняя разметка расширяется дополнительным элементом управления.

Пример упрощённой структуры:

<div class="item" data-value="1">
  Название элемента
  <a class="remove" tabindex="-1"></a>
</div>

Класс .remove является триггером удаления. Он перехватывает событие click и передаёт управление в контроллер Tom Select.

Влияние на render.item

Tom Select позволяет переопределять рендер выбранных элементов через render.item. При этом важно учитывать, что плагин remove_button добавляет свою логику поверх результата рендера.

Пример кастомного рендера:

new TomSelect("#select", {
  plugins: ["remove_button"],
  render: {
    item: function(data, escape) {
      return `<div>${escape(data.text)}</div>`;
    }
  }
});

В этом случае кнопка удаления будет автоматически добавлена поверх пользовательской разметки, если структура не нарушает ожидаемый контейнер item.

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

События, связанные с удалением

Удаление элемента через кнопку инициирует стандартные события Tom Select:

item_remove — вызывается при удалении значения
change — обновляется после изменения состояния
update (внутреннее) — используется для синхронизации UI

Пример подписки:

const ts = new TomSelect("#select", {
  plugins: ["remove_button"]
});

ts.on("item_remove", function(value) {
  console.log("Удалён элемент:", value);
});

Событие item_remove полезно для синхронизации с внешними системами состояния, API или реактивными фреймворками.

Работа с disabled состоянием

Если элемент select или конкретный item находится в состоянии disabled, поведение кнопки удаления меняется:

удаление может быть полностью заблокировано
кнопка может быть скрыта через CSS
клики игнорируются обработчиком событий

Пример блокировки всего селекта:

new TomSelect("#select", {
  plugins: ["remove_button"],
  disabled: true
});

В этом состоянии UI остаётся статичным, а внутренние методы удаления не вызываются.

Кастомизация внешнего вида кнопки удаления

Поскольку кнопка удаления является частью DOM-структуры item, её внешний вид полностью контролируется через CSS.

Базовые селекторы:

.ts-wrapper .item .remove {
  margin-left: 6px;
  cursor: pointer;
}

Расширенные варианты кастомизации:

.ts-wrapper .item .remove {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.ts-wrapper .item .remove:hover {
  opacity: 1;
}

Также можно заменить визуальный символ на SVG:

.ts-wrapper .item .remove::after {
  content: "×";
}

Интеграция с темами и кастомными UI

В сложных интерфейсах Tom Select часто используется вместе с дизайн-системами. В этом случае кнопка удаления становится частью общего UI-слоя и должна соответствовать визуальному стилю.

Типичные сценарии:

интеграция с Tailwind-подобными утилитарными классами
использование BEM-структуры
стилизация под Material UI или Ant Design

Пример:

.item {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 4px 8px;
}

.item .remove {
  color: #6b7280;
}

Поведение при программном удалении

Удаление не обязательно должно происходить через UI. Tom Select предоставляет API:

ts.removeItem("value");

В этом случае плагин remove_button не участвует напрямую, но итоговый эффект идентичен клику по кнопке.

Также возможно массовое удаление:

ts.clear();

Это очищает все выбранные элементы и приводит UI к начальному состоянию.

Особенности работы в режиме тегов

При использовании Tom Select как системы тегов (tag input) кнопка удаления становится ключевым элементом управления.

Особенности:

каждый тег равен item
удаление происходит мгновенно без подтверждения
новые элементы создаются динамически и сразу получают кнопку удаления

Пример:

new TomSelect("#tags", {
  plugins: ["remove_button"],
  create: true
});

Производительность при большом количестве элементов

При большом количестве выбранных элементов (десятки или сотни) кнопка удаления может становиться частью производственной нагрузки UI.

Tom Select оптимизирует поведение следующим образом:

минимизация повторного рендеринга
делегирование событий клика
обновление только изменённого item, а не всего списка

Тем не менее при экстремальных объёмах данных рекомендуется контролировать количество выбранных значений или использовать виртуализацию внешнего слоя.

Совместимость с другими плагинами

remove_button корректно работает в связке с большинством встроенных плагинов Tom Select, включая:

dropdown_input
clear_button
checkbox_options

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

Ограничения и потенциальные конфликты

Несколько типичных ограничений:

нестандартный render.item может удалить контейнер .item, необходимый для кнопки
CSS reset может скрыть .remove
переопределение событий click на уровне item может блокировать удаление
использование pointer-events: none ломает интерактивность кнопки

Корректная работа плагина зависит от сохранения базовой структуры item и обработки событий без перехвата на родительских уровнях.