Удаление элемента из DOM: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь удалять элементы из DOM дерева с помощью JavaScript. Вам будут представлены различные HTML-структуры и задачи, требующие удаления определенных элементов, их потомков или групп элементов. Вам нужно будет дополнить JavaScript код, используя различные методы и подходы к удалению, чтобы добиться желаемого результата. Задания расположены в порядке возрастания сложности, начиная с простых случаев удаления одного элемента и заканчивая более сложными сценариями с использованием различных селекторов и методов.

Список тем

Удаление простого элемента

Удалите элемент с идентификатором "paragraph" из DOM. Вам дан HTML-документ с параграфом, имеющим уникальный идентификатор. Ваша задача - написать JavaScript-код, который найдет этот элемент по его ID и удалит его.

HTML

Восстановить HTML

                      <p id="paragraph">Этот параграф нужно удалить.</p>

<p id="paragraph">Этот параграф нужно удалить.</p>

JavaScript

const element = document.input__1("paragraph");
element.input__2();

                     const element = document.input__1("paragraph");
element.input__2();

Используйте `document.getElementById()` для получения элемента по ID, а затем метод `remove()` для его удаления.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление элемента по классу

Удалите все элементы с классом "remove-me". Вам предоставлен HTML-код с несколькими элементами, имеющими одинаковый класс. Ваша задача - найти все эти элементы и удалить их из DOM.

HTML

Восстановить HTML

                      <div class="remove-me">Элемент 1</div>
<p class="remove-me">Элемент 2</p>
<span class="remove-me">Элемент 3</span>

<div class="remove-me">Элемент 1</div>
<p class="remove-me">Элемент 2</p>
<span class="remove-me">Элемент 3</span>

JavaScript

const elements = document.input__1("remove-me");
for (let i = input__2; i <  elements.length; input__3) {
  elements[i].remove();
}

                     const elements = document.input__1("remove-me");
for (let i = input__2; i <  elements.length; input__3) {
  elements[i].remove();
}

Используйте `document.getElementsByClassName()` для получения коллекции элементов по классу. Затем, в цикле, удалите каждый элемент из коллекции.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

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

Удалите второй элемент списка (li) из неупорядоченного списка (ul) с идентификатором "myList".

HTML

Восстановить HTML

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const list = document.getElementById("myList");
const listItemToRemove = list.input__1[input__2];
listItemToRemove.input__3();

                     const list = document.getElementById("myList");
const listItemToRemove = list.input__1[input__2];
listItemToRemove.input__3();

Получите родительский элемент (ul) по ID. Затем получите его дочерние элементы (li) и удалите нужный элемент по индексу.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление последнего дочернего элемента

Удалите последний элемент из списка (ul) с идентификатором "myList".

HTML

Восстановить HTML

                      <ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

<ul id="myList">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

JavaScript

const list = document.getElementById("input__1");
const lastItem = list.input__2;
input__3.remove();

                     const list = document.getElementById("input__1");
const lastItem = list.input__2;
input__3.remove();

Получите родительский элемент (ul) по ID. Используйте свойство `lastElementChild` для доступа к последнему дочернему элементу, а затем удалите его.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление элемента с использованием querySelector

Удалите элемент с классом "target" внутри div с идентификатором "container".

HTML

Восстановить HTML

                      <div id="container">
  <p>Какой-то текст</p>
  <span class="target">Этот элемент нужно удалить</span>
</div>

<div id="container">
  <p>Какой-то текст</p>
  <span class="target">Этот элемент нужно удалить</span>
</div>

JavaScript

const element = document.input__1("#container .target");
element.input__2();

                     const element = document.input__1("#container .target");
element.input__2();

Используйте `document.querySelector()` для выбора элемента с классом "target", который находится внутри элемента с ID "container". Затем удалите найденный элемент.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление нескольких элементов с querySelectorAll

Удалите все изображения (img) на странице.

HTML

Восстановить HTML

                      <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<p>Текст</p>

<img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
<img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 2">
<p>Текст</p>

JavaScript

const images = document.input__1("img");
for (let input__2 = 0; i < images.length; i++) {
  images[i].remove();
}

                     const images = document.input__1("img");
for (let input__2 = 0; i < images.length; i++) {
  images[i].remove();
}

Используйте `document.querySelectorAll()` для получения всех элементов `img`. Затем, в цикле, удалите каждый найденный элемент.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление элемента, зная его родителя

Удалите элемент с id="child", зная, что его родитель имеет id="parent".

HTML

Восстановить HTML

                      <div id="parent">
 <p id="child">Этот элемент нужно удалить</p>
</div>

<div id="parent">
 <p id="child">Этот элемент нужно удалить</p>
</div>

JavaScript

const parent = document.getElementById(input__1);
const child = parent.querySelector(input__2);
child.remove();

                     const parent = document.getElementById(input__1);
const child = parent.querySelector(input__2);
child.remove();

Получите родительский элемент по ID. Затем получите дочерний элемент с помощью `querySelector('#child')` относительно родителя и удалите его.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление всех дочерних элементов родителя

Удалите все дочерние элементы из div с id="container".

HTML

Восстановить HTML

                      <div id="container">
  <p>Первый дочерний элемент</p>
  <span>Второй дочерний элемент</span>
  <div>Третий дочерний элемент</div>
</div>

<div id="container">
  <p>Первый дочерний элемент</p>
  <span>Второй дочерний элемент</span>
  <div>Третий дочерний элемент</div>
</div>

JavaScript

const container = document.getElementById("container");
while (container.input__1) {
  container.input__2.remove();
}

                     const container = document.getElementById("container");
while (container.input__1) {
  container.input__2.remove();
}

Получите родительский элемент по ID. Затем, пока у родителя есть первый дочерний элемент, удаляйте его.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Удаление элемента по атрибуту

Удалить элемент с атрибутом data-remove="true".

HTML

Восстановить HTML

                      <div data-remove="true">Этот элемент нужно удалить</div>
<p>Этот элемент останется</p>

<div data-remove="true">Этот элемент нужно удалить</div>
<p>Этот элемент останется</p>

JavaScript

const element = document.querySelector(input__1);
element.input__2();

                     const element = document.querySelector(input__1);
element.input__2();

Используйте `querySelector()` с селектором атрибута `[data-remove="true"]`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку