Tự xóa các phần tử mới trong JavaScript

Trong bài học trước, chúng ta đã học cách làm sao để các phần tử tự xóa chính chúng khi được nhấp vào.

Bây giờ, giả sử ban đầu không có phần tử nào trong phần tử cha:

<div id="parent"></div>

Hãy tạo 9 đoạn văn mới trong một vòng lặp, đồng thời thiết lập sao cho bất kỳ đoạn văn nào cũng sẽ bị xóa khi nhấp vào nó:

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);
}

Cho đoạn mã sau:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<input type="submit" id="button">

Hãy làm sao để khi nhấp vào nút, một phần tử mới được thêm vào danh sách. Đồng thời, hãy làm sao để bất kỳ li nào cũng bị xóa khi nhấp vào nó. Điều này áp dụng cho cả những li đã có trong danh sách, lẫn những phần tử mới được tạo sau khi nhấn vào nút.