Удаление и замена узлов
Безопасно удаляйте и заменяйте элементы.
«Удаление и замена узлов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Удаление узлов
Помимо добавления элементов, часто требуется удалять или заменять их. Современные методы DOM делают такой код кратким и понятным.
remove
remove напрямую отсоединяет элемент от DOM, и ссылка на родителя не требуется.
const alert = document.querySelector(".alert");
alert.remove();removeChild
Устаревший removeChild вызывается у родителя и возвращает удалённый узел, поэтому его можно использовать повторно.
const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);Удаление нескольких элементов
Чтобы удалить всех дочерних элементов, выполняйте цикл, пока список не опустеет, или присвойте innerHTML пустую строку (это быстро, но ссылки на элементы будут потеряны).
while (list.firstChild) {
list.removeChild(list.firstChild);
}replaceWith
replaceWith заменяет элемент одним или несколькими новыми узлами или строками за один вызов.
const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);replaceWith для нескольких узлов
replaceWith принимает несколько аргументов, поэтому один узел можно заменить несколькими.
old.replaceWith(headerEl, bodyEl);replaceChild
Классический метод replaceChild(newNode, oldNode) вызывается у родителя. Следите за порядком аргументов: сначала новый, затем старый.
list.replaceChild(newItem, oldItem);Отсоединённые узлы сохраняются
Удалённый узел не уничтожается. Если сохранить ссылку на него, его можно вставить снова позже, что удобно для сценариев показа и скрытия.
const saved = panel;
panel.remove();
// later:
container.append(saved);replaceChildren
replaceChildren сразу заменяет всех дочерних элементов элемента или удаляет их, если вызвать метод без аргументов.
list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren(); // remove everythingПамять и обработчики
После удаления элемента его обработчики событий перестают срабатывать, пока элемент отсоединён. При повторном добавлении обработчики, прикреплённые к самому элементу, сохраняются.
btn.addEventListener("click", handler);
btn.remove(); // handler will not fire while detached
container.append(btn); // handler works againВыбор метода
Для чистого современного кода предпочтительны remove и replaceWith. Используйте removeChild/replaceChild, если нужно получить возвращённый узел или обеспечить поддержку очень старых сред.
Быстрая проверка
Проверьте порядок аргументов.
Итоги
Удаляйте узлы с помощью современного remove или родительского removeChild. Заменяйте их через replaceWith (современный метод с несколькими аргументами) или replaceChild(newNode, oldNode). Используйте replaceChildren, чтобы сбросить всех дочерних элементов. Отсоединённые узлы сохраняются в памяти, и их можно вставить снова позже.
Часто задаваемые вопросы
Урок «Удаление и замена узлов» бесплатный?
Да — полный текст урока «Удаление и замена узлов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Удаление и замена узлов»?
Безопасно удаляйте и заменяйте элементы. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Удаление и замена узлов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение текста и содержимого HTML
- Создание и вставка элементов
- Изменение атрибутов и классов
- Удаление и замена узлов