Creating links to remove elements in JavaScript

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.

enru