Slet element link i JavaScript
Lad os sige, at vi har et afsnit. Lad os lave et link ved siden af det, som kan bruges til at slette dette afsnit.
Lad os implementere:
<div id="parent">
<p id="elem">tekst</p>
<a href="#" id="remove">slet</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function() {
elem.remove();
});
Bemærk venligst, at der står en # i linkets href-attribut. Hvis denne # fjernes - får vi et linkklik og som følge heraf en sideopdatering.
Faktisk vil sletningen af afsnittet også ske, men vi vil ikke lægge mærke til det, fordi siden opdateres, og alt vender tilbage til udgangspunktet.
For at løse problemet er det nødvendigt at forhindre
linket i at blive fulgt ved hjælp af preventDefault:
<div id="parent">
<p id="elem">tekst</p>
<a href="" id="remove">slet</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault(); // annullerer linkets standardadfærd
});
Løs den beskrevne opgave selv, uden at kigge på min kode.