Kesalahan Pembersihan Induk yang Tidak Tepat dalam JavaScript

Misalkan kita memiliki suatu daftar. Misalkan dengan menekan sebuah tombol kita ingin setiap kali membentuk ulang daftar ini, membersihkan isinya yang sebelumnya. Pemula sering melakukan kesalahan dengan mencoba menemukan solusi yang rumit. Mari kita lihat opsi yang sederhana.

Misalkan kita mendapatkan daftar ke dalam variabel:

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

Misalkan kita juga mendapatkan tombol:

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

Misalkan dengan menekan tombol, daftar kita terisi dengan beberapa nilai. Sebagai contoh, saya mengambil nilai acak, yang sesuai dengan detik saat ini:

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 kode di atas, item daftar baru akan ditambahkan setelah yang sudah ada. Padahal kita ingin item sebelumnya terhapus terlebih dahulu. Solusinya sederhana - kita hanya perlu membersihkan teks dari tag ul kita:

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