In the previous lesson, we learned how to make elements remove themselves on click.
Let now there are no elements in the parent initially:
<div id="parent"></div>
Let's create 9
new paragraphs in a loop,
making any paragraph removed by clicking on it:
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let p = document.createElement('p');
p.textContent = i;
p.addEventListener('click', function() {
this.remove();
});
parent.appendChild(p);
}
Given the following code:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="submit" id="button">
Make it so that when you click on the button,
a new element is added to the list. Make sure
that any li
is removed by clicking on it.
We are talking about both those li
that
are already in the list, as well as new ones
created after pressing the button.