Σύνδεσμος για διαγραφή στοιχείου σε JavaScript

Ας υποθέσουμε ότι έχουμε μια παράγραφο. Ας φτιάξουμε δίπλα της έναν σύνδεσμο, με τη βοήθεια του οποίου θα μπορούμε να διαγράψουμε αυτήν την παράγραφο.

Ας υλοποιήσουμε:

<div id="parent">
	<p id="elem">κείμενο</p>
	<a href="#" id="remove">διαγραφή</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function() {
	elem.remove();
});

Παρατηρήστε ότι στο χαρακτηριστικό href του συνδέσμου υπάρχει το #. Εάν αφαιρέσετε αυτό το δίεση - θα πραγματοποιηθεί μετάβαση μέσω του συνδέσμου και, ως αποτέλεσμα, ανανέωση της σελίδας.

Στην πραγματικότητα, η διαγραφή της παραγράφου θα συμβαίνει επίσης, αλλά δεν θα το παρατηρήσουμε, καθώς η σελίδα θα ανανεωθεί και όλα θα επιστρέψουν στην αρχική τους θέση.

Για την επίλυση του προβλήματος είναι απαραίτητο να αποτραπεί η μετάβαση μέσω του συνδέσμου χρησιμοποιώντας το preventDefault:

<div id="parent">
	<p id="elem">κείμενο</p>
	<a href="" id="remove">διαγραφή</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // ακυρώνουμε τη μετάβαση μέσω του συνδέσμου
});

Ανεξάρτητα, χωρίς να κοιτάτε τον κώδικά μου, λύστε την περιγραφόμενη άσκηση.