Удаление всего содержимого элемента [Модуль 2: Манипуляция содержимым]: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Задание 1. Простое удаление текста

id: 37008_remove-content-1

Удалите текст из параграфа с идентификатором "textParagraph", используя JavaScript.

HTML

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

                      <div class="exercise-container">
  <p id="textParagraph">Это текст, который нужно удалить.</p>
</div>

<div class="exercise-container">
  <p id="textParagraph">Это текст, который нужно удалить.</p>
</div>

JavaScript

document.input__1("textParagraph").input__2 = input__3;

                     document.input__1("textParagraph").input__2 = input__3;

Для удаления текста из элемента можно использовать свойство `innerHTML`. Присвойте свойству `innerHTML` пустую строку.

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

Результат

Лог

Выполнить

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

Задание 2. Очистка списка

id: 37008_remove-content-2

Очистите неупорядоченный список (ul) с идентификатором "itemList" от всех элементов списка (li).

HTML

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

                      <div class="exercise-container">
  <ul id="itemList">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</div>

<div class="exercise-container">
  <ul id="itemList">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</div>

JavaScript

document.input__1("itemList").input__2 = input__3;

                     document.input__1("itemList").input__2 = input__3;

Подобно удалению текста, можно использовать `innerHTML = ""` для очистки содержимого списка.

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

Результат

Лог

Выполнить

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

Задание 3. Очистка нескольких элементов

id: 37008_remove-content-3

Удалите содержимое всех параграфов с классом "муParagraphs". Используйте для этого цикл.

HTML

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

                      <div class="exercise-container">
  <p class="муParagraphs">Параграф 1 для очистки.</p>
  <p class="муParagraphs">Параграф 2 для очистки.</p>
  <p class="муParagraphs">Параграф 3 для очистки.</p>
</div>

<div class="exercise-container">
  <p class="муParagraphs">Параграф 1 для очистки.</p>
  <p class="муParagraphs">Параграф 2 для очистки.</p>
  <p class="муParagraphs">Параграф 3 для очистки.</p>
</div>

JavaScript

const paragraphs = document.input__1(".муParagraphs");
for (let i = 0; i < input__2.length; iinput__3) {
  paragraphs[input__4].input__5 = input__6;
}

                     const paragraphs = document.input__1(".муParagraphs");
for (let i = 0; i < input__2.length; iinput__3) {
  paragraphs[input__4].input__5 = input__6;
}

Сначала получите коллекцию элементов с классом "муParagraphs" с помощью `querySelectorAll`. Затем переберите коллекцию в цикле и для каждого элемента очистите содержимое.

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

Результат

Лог

Выполнить

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

Задание 4. Удаление дочерних элементов

id: 37008_remove-content-4

Удалите всех дочерних элементов из div-а с идентификатором "childContainer". Используйте метод `removeChild`.

HTML

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

                      <div class="exercise-container">
  <div id="childContainer">
    <p>Дочерний элемент 1</p>
    <span>Дочерний элемент 2</span>
    <button>Дочерний элемент 3</button>
  </div>
</div>

<div class="exercise-container">
  <div id="childContainer">
    <p>Дочерний элемент 1</p>
    <span>Дочерний элемент 2</span>
    <button>Дочерний элемент 3</button>
  </div>
</div>

JavaScript

const container = document.input__1("childContainer");
while (container.input__2) {
  container.input__3(container.input__4);
}

                     const container = document.input__1("childContainer");
while (container.input__2) {
  container.input__3(container.input__4);
}

Используйте цикл `while` и свойство `firstChild` для удаления дочерних элементов один за другим, пока они есть.

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

Результат

Лог

Выполнить

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

Задание 5. Очистка через textContent

id: 37008_remove-content-5

Очистите текст параграфа с идентификатором "textContentParagraph", используя свойство `textContent`.

HTML

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

                      <div class="exercise-container">
  <p id="textContentParagraph">Этот текст нужно удалить с помощью textContent.</p>
</div>

<div class="exercise-container">
  <p id="textContentParagraph">Этот текст нужно удалить с помощью textContent.</p>
</div>

JavaScript

document.input__1("textContentParagraph").input__2 = input__3;

                     document.input__1("textContentParagraph").input__2 = input__3;

Свойство `textContent` похоже на `innerHTML`, но работает только с текстовым содержимым. Присвойте свойству `textContent` пустую строку.

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

Результат

Лог

Выполнить

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

Задание 6. Очистка по клику кнопки

id: 37008_remove-content-6

Добавьте обработчик события на кнопку "clearButton", чтобы при клике на нее очищался div с идентификатором "clickableDiv".

HTML

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

                      <div class="exercise-container">
  <div id="clickableDiv">Содержимое для очистки по клику.</div>
  <button id="clearButton">Очистить</button>
</div>

<div class="exercise-container">
  <div id="clickableDiv">Содержимое для очистки по клику.</div>
  <button id="clearButton">Очистить</button>
</div>

JavaScript

const clearButton = document.input__1("clearButton");
const divToClear = document.input__2("clickableDiv");

clearButton.addEventListener('click', function() {
  divToClear.input__3 = input__4;
});

                     const clearButton = document.input__1("clearButton");
const divToClear = document.input__2("clickableDiv");

clearButton.addEventListener('click', function() {
  divToClear.input__3 = input__4;
});

Сначала получите кнопку и div. Затем добавьте обработчик события 'click' на кнопку, в котором очистите содержимое div-а.

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

Результат

Лог

Выполнить

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