Let now we have many paragraphs:
<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:
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's now make it so that when you click on the link, the corresponding paragraph is removed:
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();
});
}
The ul
tag is given. Add a link to
the end of each li
tag to remove
that li
from the list.
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.