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

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

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

Список тем

Задание 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. Очистка списка

Очистите неупорядоченный список (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. Очистка нескольких элементов

Удалите содержимое всех параграфов с классом "му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. Удаление дочерних элементов

Удалите всех дочерних элементов из 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

Очистите текст параграфа с идентификатором "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. Очистка по клику кнопки

Добавьте обработчик события на кнопку "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-а.

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

Результат

Лог

Выполнить

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

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