Edição e exclusão simultânea de elementos
Suponha que temos um conjunto de parágrafos:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Vamos fazer com que para estes parágrafos seja possível editar o texto de cada parágrafo e, ao mesmo tempo, que no final de cada parágrafo haja um link para exclusão.
Ao implementar a tarefa descrita, nos deparamos com um determinado problema.
Para entender a essência do problema, vamos olhar para o código HTML que resultará quando os links de exclusão forem adicionados ao final de cada parágrafo:
<div id="parent">
<p>text1<a href="">remover</a></p>
<p>text2<a href="">remover</a></p>
<p>text3<a href="">remover</a></p>
</div>
Agora imagine que, ao clicar em qualquer parágrafo, apareça nele um input para edição do texto. Neste caso, todo o texto do parágrafo será colocado no input - junto com o link de exclusão!
Isto, claro, não está correto.
Uma solução mais adequada seria envolver os textos
dos parágrafos em tags span, assim:
<div id="parent">
<p><span>text1</span><a href="">remover</a></p>
<p><span>text2</span><a href="">remover</a></p>
<p><span>text3</span><a href="">remover</a></p>
</div>
Para este código, podemos simplesmente adicionar um evento
de edição não ao parágrafo em si, mas ao
span com o texto. Neste caso, o input
para edição aparecerá dentro da tag
span, e nosso link de exclusão permanecerá
intacto.
É dado o seguinte código HTML:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Adicione um link de exclusão ao final de cada parágrafo.
Faça com que, ao clicar no span,
apareça nele um input para edição.
Suponha agora que inicialmente não haja tags span:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Primeiro, envolva o texto do parágrafo em tags span,
adicione a essas tags a capacidade de edição,
e então adicione ao final de cada parágrafo um link
de exclusão.
