Удаление группы экземпляров

При работе с большим количеством полей ввода часто возникает необходимость массово уничтожать экземпляры AutoNumeric. Особенно это важно в динамических интерфейсах:

удаление строк таблиц;
очистка форм;
уничтожение временных элементов;
переинициализация интерфейса;
удаление модальных окон;
уничтожение SPA-компонентов;
повторная генерация DOM-структур.

В AutoNumeric для подобных задач используются групповые операции удаления. Они позволяют безопасно уничтожать несколько экземпляров одновременно, корректно снимая:

обработчики событий;
внутренние ссылки;
наблюдатели;
привязки к DOM;
внутренние кэши.

Проблема ручного удаления

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

Пример ручного уничтожения:

an1.remove();
an2.remove();
an3.remove();
an4.remove();

При динамическом интерфейсе такой подход становится неудобным:

const rows = document.querySelectorAll('.price');

rows.forEach(element => {
    AutoNumeric.getAutoNumericElement(element).remove();
});

Кроме избыточности появляется риск:

пропустить экземпляр;
удалить уже уничтоженный объект;
оставить «висящие» обработчики;
потерять контроль над состоянием формы.

Групповое удаление через multiple()

Создание группы экземпляров

AutoNumeric предоставляет механизм групповых операций через AutoNumeric.multiple().

Пример:

const elements = document.querySelectorAll('.money');

const group = AutoNumeric.multiple(elements, {
    currencySymbol: '₸ ',
    digitGroupSeparator: ' '
});

Метод возвращает специальный массив экземпляров AutoNumeric.

Каждый элемент массива — полноценный объект AutoNumeric:

group[0].set(1000);
group[1].set(2000);

Но дополнительно группа получает методы массовых операций.

Удаление всей группы

Для уничтожения всех экземпляров используется:

group.remove();

После вызова:

все экземпляры уничтожаются;
обработчики удаляются;
форматирование отключается;
элементы возвращаются к обычному состоянию.

Что происходит при remove()

Снятие обработчиков событий

AutoNumeric регистрирует множество событий:

input;
keydown;
keyup;
focus;
blur;
wheel;
paste;
drop.

Во время удаления экземпляра библиотека снимает все привязки.

Без корректного удаления могут появляться:

утечки памяти;
дублирование событий;
повторное форматирование;
падение производительности.

Очистка внутренних данных

AutoNumeric хранит:

текущее значение;
конфигурацию;
историю изменений;
состояние курсора;
ссылки на DOM.

При remove() эти структуры уничтожаются.

Возврат элемента к обычному input

До удаления:

<input value="1 234 ₸">

После:

<input value="1234">

Форматирование исчезает.

Поле перестаёт быть AutoNumeric-экземпляром.

Удаление группы в динамических интерфейсах

Удаление строк таблицы

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

<tr class="row">
    <td><input class="price"></td>
    <td><button class="remove">Удалить</button></td>
</tr>

Инициализация:

const autoNumericGroup = AutoNumeric.multiple('.price', {
    currencySymbol: '$'
});

Удаление:

document.querySelector('.remove-all')
    .addEventListener('click', () => {
        autoNumericGroup.remove();
    });

Очистка модального окна

При закрытии модального окна желательно уничтожать экземпляры.

function destroyModal() {
    modalGroup.remove();
    modal.remove();
}

Это предотвращает накопление скрытых обработчиков.

Удаление SPA-компонентов

Во фреймворках:

React;
Vue;
Angular;
Svelte;

неуничтоженные экземпляры становятся причиной утечек памяти.

Правильный жизненный цикл:

const group = AutoNumeric.multiple(inputs);

component.onDestroy(() => {
    group.remove();
});

Поведение массива после удаления

Группа остаётся в памяти Javascript

После:

group.remove();

сам массив ещё существует:

console.log(group);

Но его элементы больше не являются активными экземплярами AutoNumeric.

Повторное использование невозможно

Нельзя:

group.set(100);

после удаления.

Это приведёт к ошибкам или некорректной работе.

После уничтожения необходимо создавать новую группу.

Частичное удаление экземпляров

Удаление отдельного элемента

Можно удалить конкретный экземпляр:

group[2].remove();

Остальные элементы продолжат работать.

Смешанное удаление

Иногда требуется уничтожить только часть группы:

group.forEach((instance, index) => {
    if (index % 2 === 0) {
        instance.remove();
    }
});

Повторная инициализация после удаления

Полный цикл

Удаление часто сопровождается повторным созданием.

let group = AutoNumeric.multiple('.amount');

group.remove();

group = AutoNumeric.multiple('.amount');

Обновление конфигурации

Удаление удобно использовать перед полной сменой настроек.

Было:

AutoNumeric.multiple('.money', {
    currencySymbol: '$'
});

Стало:

group.remove();

group = AutoNumeric.multiple('.money', {
    currencySymbol: '€'
});

Отличие remove() от DOM-удаления

Неправильный подход

Ошибка:

element.remove();

без уничтожения AutoNumeric.

Проблемы:

объект остаётся в памяти;
обработчики продолжают существовать;
ссылки не очищаются.

Правильный порядок

Сначала:

instance.remove();

Потом:

element.remove();

Для группы:

group.remove();

container.remove();

Удаление через getAutoNumericElement()

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

document.querySelectorAll('.price')
    .forEach(element => {
        const anElement =
            AutoNumeric.getAutoNumericElement(element);

        if (anElement) {
            anElement.remove();
        }
    });

Проверка существования экземпляра

Перед удалением полезно проверять наличие объекта.

const an = AutoNumeric.getAutoNumericElement(input);

if (an !== null) {
    an.remove();
}

Это особенно важно при сложных SPA-интерфейсах.

Удаление и события

События после remove()

После уничтожения:

AutoNumeric больше не генерирует события;
форматирование прекращается;
автоматические преобразования отключаются.

Поле становится обычным DOM-элементом.

Потеря пользовательских событий

Если пользовательские обработчики зависели от AutoNumeric-событий:

input.addEventListener('autoNumeric:rawValueModified', fn);

то после удаления они больше не будут вызываться.

Удаление при AJAX-перерисовке

Типичная проблема

Сервер возвращает новый HTML:

container.innerHTML = html;

Старые экземпляры AutoNumeric остаются в памяти.

Правильная последовательность

group.remove();

container.innerHTML = html;

group = AutoNumeric.multiple('.money');

Удаление перед клонированием

Проблемы клонирования

Клонирование DOM-узлов с активным AutoNumeric:

const clone = node.cloneNode(true);

может переносить некорректное состояние.

Безопасный подход

group.remove();

const clone = node.cloneNode(true);

После клонирования:

AutoNumeric.multiple(clone.querySelectorAll('.money'));

Массовое уничтожение через CSS-селекторы

Комбинация с querySelectorAll

const instances = document.querySelectorAll('.currency');

const group = AutoNumeric.multiple(instances);

group.remove();

Удаление временных элементов

function destroyTemporaryFields() {
    const tempInputs =
        document.querySelectorAll('.temporary-money');

    AutoNumeric
        .multiple(tempInputs)
        .remove();
}

Удаление и производительность

Преимущество группового remove()

Групповое удаление:

group.remove();

обычно эффективнее большого количества разрозненных операций.

Причины:

централизованная очистка;
оптимизированный цикл;
уменьшение накладных расходов;
последовательное уничтожение внутренних структур.

Влияние на большие формы

При наличии сотен полей:

AutoNumeric.multiple('.financial-input');

правильное удаление критически важно.

Без этого:

растёт потребление памяти;
увеличивается число активных обработчиков;
замедляется ввод;
ухудшается отзывчивость интерфейса.

Поведение value после удаления

Сохранение текущего значения

После:

instance.remove();

значение поля остаётся.

Но оно уже не форматируется автоматически.

Пример

До удаления:

<input value="$1,500.00">

После:

<input value="1500">

Полное уничтожение формы

Массовая очистка перед удалением формы

const formGroup = AutoNumeric.multiple(
    form.querySelectorAll('.numeric')
);

formGroup.remove();

form.remove();

Переинициализация формы

formGroup.remove();

form.innerHTML = template;

formGroup = AutoNumeric.multiple(
    form.querySelectorAll('.numeric')
);

Типичные ошибки

Удаление DOM без remove()

Неправильно:

container.innerHTML = '';

Правильно:

group.remove();

container.innerHTML = '';

Повторное использование уничтоженной группы

Ошибка:

group.remove();

group.set(100);

Двойное удаление

Некоторые разработчики вызывают:

group.remove();
group.remove();

Поведение может зависеть от версии библиотеки.

Лучше после удаления обнулять ссылку:

group.remove();
group = null;

Практический шаблон безопасного удаления

let group = AutoNumeric.multiple('.amount', {
    currencySymbol: '₽ '
});

function destroy() {
    if (group) {
        group.remove();
        group = null;
    }
}

Архитектурный подход

Централизованное управление экземплярами

В крупных приложениях удобно хранить группы отдельно:

const numericGroups = {
    prices: AutoNumeric.multiple('.price'),
    taxes: AutoNumeric.multiple('.tax'),
    totals: AutoNumeric.multiple('.total')
};

Удаление:

Object.values(numericGroups)
    .forEach(group => group.remove());

Менеджер жизненного цикла

class NumericManager {
    constructor(selector, options) {
        this.group =
            AutoNumeric.multiple(selector, options);
    }

    destroy() {
        if (this.group) {
            this.group.remove();
            this.group = null;
        }
    }
}

Такой подход особенно полезен в сложных интерфейсах с большим количеством динамических компонентов.