Criando links para remover elementos em JavaScript
Suponha que agora temos muitos parágrafos:
<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:
let 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:
let 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();
});
}
Dada a tag ul. Adicione no final de cada
tag li um link para remover este li
da lista.
Dada uma tabela HTML. Adicione mais uma coluna nela, na qual para cada linha da tabela haverá um link para remover essa linha.