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(); // шилтеме боюнча өтүүнү токтотот
});

Өз алдынча, менин кодумга карабастан, сүрөттөлгөн маселени чечиңиз.