ელემენტის წაშლის ბმული 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(); // ბმულზე გადასვლის გაუქმება
});

დამოუკიდებლად, ჩემს კოდში ჩახედვის გარეშე, მოაგვარეთ აღწერილი ამოცანა.