Elementa dzēšanas saite JavaScript

Pieņemsim, ka mums ir rindkopa. Izveidosim blakus tai saiti, ar kuras palīdzību šo rindkopu varēs izdzēst.

Realizēsim:

<div id="parent">
	<p id="elem">teksts</p>
	<a href="#" id="remove">dzēst</a>
</div>

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

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

Ievērojiet, ka saites href atribūtā ir #. Ja šo režģi noņemtu - mēs iegūtu pāreju pa saiti un rezultātā lapas atsvaidzināšanu.

Patiesībā arī rindkopas dzēšana notiks, bet mēs to nepamanīsim, jo lapa atsvaidzināsies un viss atgriezīsies sākotnējā stāvoklī.

Lai atrisinātu problēmu, nepieciešams novērst pāreju pa saiti, izmantojot preventDefault:

<div id="parent">
	<p id="elem">teksts</p>
	<a href="" id="remove">dzēst</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // atceļ pāreju pa saiti
});

Patstāvīgi, neieskatoties manā kodā, atrisiniet aprakstīto uzdevumu.