JavaScript с нуля - [64]

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

Мне кажется, что следующая фраза принадлежит какому-то умному человеку: «То, что имеет силу создавать, имеет силу и удалять». В предыдущем разделе мы видели, как можно использовать метод 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 имеет несколько уровней потомков и их потомков, то все они будут также удалены.

Клонирование элементов

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

Клонирование производится с помощью вызова функции cloneNode для нужного элемента с аргументом true или false — это определяет, хотим мы клонировать только сам элемент или еще и всех его потомков. Вот как будет выглядеть код для клонирования элемента (и добавления его в DOM):

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

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

let clonedItem = item.cloneNode(false);

// добавление клонированного элемента в DOM

bodyElement.appendChild(clonedItem);

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

Am I real?

I exist entirely in your imagination.

Если вы поместите весь этот код в HTML-документ и просмотрите его в браузере, то увидите нечто напоминающее недавний пример:

Но спустя пару секунд вы заметите, что этот пример несколько отличается — тем, что его сообщение продолжает повторяться: