Ralat Pembersihan Induk yang Tidak Betul dalam JavaScript

Katakan kita mempunyai senarai tertentu. Katakan apabila butang ditekan, kita mahu membentuk semula senarai ini setiap kali, dengan membersihkan kandungan sebelumnya. Pemula sering melakukan kesilapan dengan cuba mencipta penyelesaian yang rumit. Mari kita lihat pilihan yang mudah.

Katakan kita mendapatkan senarai ke dalam pembolehubah:

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

Katakan kita juga mendapatkan butang:

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

Katakan apabila butang ditekan, senarai kami diisi dengan beberapa nilai. Sebagai contoh, saya mengambil nilai rawak, yang sepadan dengan saat semasa:

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

Dalam kod di atas, item senarai baru akan ditambah selepas item yang sedia ada. Dan kami ingin item sebelumnya dipadamkan terlebih dahulu. Penyelesaiannya mudah - kita hanya perlu membersihkan teks tag ul kami:

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