Пусть теперь у нас есть много абзацев:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Давайте сделаем так, чтобы каждому абзацу в конец добавлялась ссылка на его удаление.
Для начала давайте просто реализуем добавление ссылок:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Давайте теперь сделаем так, чтобы по нажатию на ссылку, удалялся соответствующий ей абзац:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Дан тег ul
. Добавьте в конец каждого
тега li
ссылку на удаления этого li
из списка.
Дана HTML таблица. Добавьте в нее еще одну колонку, в которой для каждого ряда таблицы будет стоять ссылка на удаление этого ряда.