JavaScriptда элементни ўчириш учун ҳавола

Фарз қилайлик, бизда абзац бор. Унинг янида ушбу абзацни ўчириш имконини берадиган ҳавола яратайлик.

Амалга оширамиз:

html<div id="parent">
  <p id="elem">матн</p>
  <a href="#" id="remove">ўчириш</a>
</div>

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

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

Эътиборингизни ҳаволанинг href атрибутида # белгиси tурганига қаратинг. Агар бу решёткани олиб ташласак - ҳавола буйича ўтиш ва, натижада, саҳифанинг янгиланишини олиб келади.

Аслида абзацнинг ўчирилиши ҳам амалга ошади, лекин биз буни сезмаймиз, чунки саҳифа янгиланади ва ҳамма нарса бошланғич ҳолатга қайтади.

Муаммони ҳал қилиш учун preventDefault орқали ҳавола буйича ўтишнинг олдини олиш керак:

html<div id="parent">
  <p id="elem">матн</p>
  <a href="" id="remove">ўчириш</a>
</div>

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // ҳавола буйича ўтишни бекор қилади
});