Enlace para eliminar elemento en JavaScript
Supongamos que tenemos un párrafo. Hagamos junto a él un enlace, con el cual se pueda eliminar este párrafo.
Implementemos:
<div id="parent">
<p id="elem">texto</p>
<a href="#" id="remove">eliminar</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function() {
elem.remove();
});
Preste atención a que en el atributo href del enlace hay un #. Si quitamos esta almohadilla - obtendremos un seguimiento del enlace y, como consecuencia, la actualización de la página.
En realidad, la eliminación del párrafo también ocurrirá, pero no lo notaremos, ya que la página se actualizará y todo volverá a la posición inicial.
Para resolver el problema es necesario prevenir
el seguimiento del enlace usando preventDefault:
<div id="parent">
<p id="elem">texto</p>
<a href="" id="remove">eliminar</a>
</div>
let elem = document.querySelector('#elem');
let remove = document.querySelector('#remove');
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault(); // cancelamos el seguimiento del enlace
});
Resuelva de forma independiente, sin mirar mi código, la tarea descrita.