Edição e exclusão simultânea de elementos

Suponha que temos um conjunto de parágrafos:

html<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:

html<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:

html<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.

Задание 1

É dado o seguinte código HTML:

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.

Задание 2

Suponha agora que inicialmente não haja tags span:

html<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.