Self-removal of new elements in JavaScript

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.