Creación de enlaces para eliminar elementos en JavaScript
Supongamos que ahora tenemos muchos párrafos:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Hagamos que a cada párrafo se le agregue un enlace para eliminarlo al final.
Para empezar, implementemos la adición de enlaces:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Ahora hagamos que al hacer clic en el enlace, se elimine el párrafo correspondiente:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Dada una etiqueta ul. Agregue al final de cada
etiqueta li un enlace para eliminar este li
de la lista.
Dada una tabla HTML. Agregue una columna adicional en la que para cada fila de la tabla haya un enlace para eliminar esa fila.