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