JavaScript с нуля

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

Мне кажется, что следующая фраза принадлежит какому-то умному человеку: «То, что имеет силу создавать, имеет силу и удалять». В предыдущем разделе мы видели, как можно использовать метод createElement для создания элементов. В текущем разделе мы рассмотрим метод removeChild, который, несмотря на пугающее имя, занимается именно удалением элементов.

Взгляните на следующий фрагмент кода, который можно создать для работы со знакомым нам примером:

let newElement = document.createElement("p");

let bodyElement = document.querySelector("body");

let h1Element = document.querySelector("h1");

newElement.textContent = "I exist entirely in your imagination.";

bodyElement.appendChild(newElement);

bodyElement.removeChild(newElement);

Элемент p, хранящийся в newElement, добавляется к элементу body с помощью метода appendChild. Это мы уже видели раньше. Чтобы удалить этот элемент, вызывается removeChild для элемента body и передается указатель на элемент, который нужно удалить. Конечно же, это элемент newElement. Как только будет выполнен метод removeChild, все станет так, как будто DOM никогда не знала о существовании newElement.

Главное, обратите внимание, что нужно вызывать removeChild из родителя потомка, которого мы хотим удалить. Этот метод не будет отыскивать элемент для удаления по всей DOM. А теперь предположим, что у нас нет прямого доступа к родителю элемента и тратить время на его поиск мы не хотим. При этом все равно с легкостью можно удалить его с помощью свойства parentNode:

let newElement = document.createElement("p");

let bodyElement = document.querySelector("body");

let h1Element = document.querySelector("h1");

newElement.textContent = "I exist entirely in your imagination.";

bodyElement.appendChild(newElement);

newElement.parentNode.removeChild(newElement);

В этом варианте мы удаляем newElement, вызывая removeChild для его родителя, указав newElement.parentNode. Выглядит замысловато, но работает.

Теперь познакомимся с новым и лучшим способом удаления элемента, подразумевающим прямой вызов метода remove для элемента, который нужно удалить. Вот пример его использования:

let newElement = document.createElement("p");

let bodyElement = document.querySelector("body");

let h1Element = document.querySelector("h1");

newElement.textContent = "I exist entirely in your imagination.";

bodyElement.appendChild(newElement);

newElement.remove();

Я не собираюсь заканчивать тему удаления элементов на этом методе remove. Почему? Все дело в поддержке браузера. Этот подход все еще нов, поэтому более старые версии браузеров вроде Internet Explorer его не поддерживают. Если для вас принципиальна поддержка IE, то подойдут другие рассмотренные подходы.

Если вы ищите универсальный способ удаления элементов, то функция removeChild, несмотря на ее причуды, весьма эффективна. Если нужен более прямолинейный способ, присмотритесь к remove. Оба этих подхода успешно справляются с удалением элементов DOM, включая те, что были изначально созданы в разметке. При этом мы не ограничены возможностью удаления динамически добавленных элементов. Если удаляемый элемент DOM имеет несколько уровней потомков и их потомков, то все они будут также удалены.