Criando links para remover elementos em JavaScript
Suponha que agora temos muitos parágrafos:
html<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Vamos fazer com que cada parágrafo tenha um link de remoção adicionado ao seu final.
Para começar, vamos simplesmente implementar a adição dos links:
javascriptlet elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remover';
elem.appendChild(remove);
}
Agora, vamos fazer com que ao clicar no link, o parágrafo correspondente seja removido:
javascriptlet elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remover';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Задание 1
Dada a tag ul. Adicione no final de cada
tag li um link para remover este li
da lista.
Задание 2
Dada uma tabela HTML. Adicione mais uma coluna nela, na qual para cada linha da tabela haverá um link para remover essa linha.