Lỗi xóa nội dung phần tử cha không đúng cách trong JavaScript

Giả sử chúng ta có một danh sách. Giả sử khi nhấn vào một nút bấm, chúng ta muốn mỗi lần tạo lại danh sách này từ đầu, bằng cách xóa nội dung cũ của nó. Người mới thường mắc lỗi khi cố gắng nghĩ ra một giải pháp phức tạp nào đó. Hãy xem một cách làm đơn giản.

Giả sử chúng ta lấy danh sách vào một biến:

let ul = document.querySelector('ul');

Giả sử chúng ta cũng lấy nút bấm:

let btn = document.querySelector('button');

Giả sử khi nhấn vào nút bấm, danh sách của chúng ta được điền bằng một số giá trị. Ví dụ, tôi lấy một giá trị ngẫu nhiên, tương ứng với giây hiện tại:

btn.addEventListener('click', function() {
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});

Trong đoạn mã trên, các mục danh sách mới sẽ được thêm vào sau những mục đã tồn tại. Nhưng chúng ta muốn các mục cũ trước tiên phải bị xóa. Giải pháp rất đơn giản - chỉ cần xóa văn bản của thẻ ul của chúng ta:

btn.addEventListener('click', function() {
	ul.textContent = ''; // xóa danh sách
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});