ข้อผิดพลาดการล้างข้อมูลผู้ปกครองไม่ถูกต้องใน JavaScript

สมมติว่าเรามีรายการบางรายการ สมมติว่าการกดปุ่มเราต้องการ สร้างรายการนี้ขึ้นมาใหม่ทุกครั้ง ล้างเนื้อหาก่อนหน้าของมัน มือใหม่มักทำผิดพลาดโดยพยายาม คิดหาวิธีแก้ไขที่ซับซ้อน มาดูตัวเลือกง่ายๆกัน

สมมติว่าเราได้รับรายการในตัวแปร:

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

สมมติว่าเราได้รับปุ่มด้วย:

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

สมมติว่าการกดปุ่มรายการของเรา เติมค่าบางค่า สำหรับตัวอย่างฉันใช้ค่าสุ่ม ตรงกับวินาทีปัจจุบัน:

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

ในโค้ดด้านบน รายการใหม่ของรายการ จะถูกเพิ่มหลังจากที่มีอยู่แล้ว และเราต้องการให้รายการก่อนหน้า ถูกลบออกก่อน วิธีแก้ไขง่ายๆ - เพียงแค่ต้องล้างข้อความของ แท็ก ul ของเรา:

btn.addEventListener('click', function() {
	ul.textContent = ''; // ล้างรายการ
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});