Creating links to remove elements in JavaScript
Let now we have many paragraphs:
html<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Let's make sure that each paragraph has a link at the its end to remove it.
To get started, let's just implement adding links:
javascriptlet elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Let's now make it so that when you click on the link, the corresponding paragraph is removed:
javascriptlet 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();
});
}
Задание 1
The ul tag is given. Add a link to
the end of each li tag to remove
that li from the list.
Задание 2
Given an HTML table. Add another column to it, in which for each row of the table there will be a link to remove this row.