Σφάλμα εσφαλμένου καθαρισμού γονέα σε 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);
	}
});