Давайте теперь научимся удалять элементы.
Для этого нужно использовать метод removeChild,
который применяется к родительскому элементу
с указанием элемента, который нужно удалить.
Давайте посмотрим на примере. Пусть у нас есть родитель #parent, а внутри него - абзац #elem:
<div id="parent">
<p id="elem">elem 1</p>
<p>elem 2</p>
</div>
Давайте удалим указанный абзац. Для этого
получим его родителя и метод removeChild
применим к этому родителю, а параметром метода
передадим элемент, который хотим удалить:
let parent = document.querySelector('#parent');
let elem = document.querySelector('#elem');
parent.removeChild(elem);
Дан следующий код:
<ul id="parent">
<li>1</li>
<li id="elem">2</li>
<li>3</li>
</ul>
<input type="submit" id="button">
Сделайте так, чтобы по нажатию на кнопку удалялся элемент #elem.
Дан следующий код:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="submit" id="button">
Сделайте так, чтобы по каждому клику на кнопку удалялся последний элемент из #parent.
Получение родителя
Не обязательно иметь ссылку на родительский
элемент. Если ее нет, то родителя можно получить
через parentElement:
let elem = document.querySelector('#elem');
elem.parentElement.removeChild(elem);
Дан следующий код:
<ul>
<li>1</li>
<li id="elem">2</li>
<li>3</li>
</ul>
Сделайте так, чтобы по нажатию на #elem этот элемент удалился.
Совсем без родителя
Можно заметить, что иметь ссылку на родителя для удаления самого элемента не очень удобно. Поэтому в современном JavaScript появился метод remove, который просто нужно применить для удаления элемента:
let elem = document.querySelector('#elem');
elem.remove();
Дан следующий код:
<ul>
<li>1</li>
<li id="elem">2</li>
<li>3</li>
</ul>
Сделайте так, чтобы по нажатию на #elem этот элемент удалился.