Simultaneous editing and removal of elements

Suppose we have some set of paragraphs:

<div id="parent"> <p>text1</p> <p>text2</p> <p>text3</p> </div>

Let's make these paragraphs so that you can edit the text of each paragraph and at the same time at the end of each paragraph there was a link to remove.

When implementing the described task, we are faced with a certain problem.

In order to understand the essence of the problem, let's look at the HTML code that will result when links to remove are added to the end of each paragraph:

<div id="parent"> <p>text1<a href="">remove</a></p> <p>text2<a href="">remove</a></p> <p>text3<a href="">remove</a></p> </div>

Imagine now that by clicking on any paragraph, an input for editing the text will appear in it. In this case, the entire text of the paragraph will be included in the input - along with a link to remove!

This is of course not correct.

A better solution would be to wrap paragraph texts in span tags, like this:

<div id="parent"> <p><span>text1</span><a href="">remove</a></p> <p><span>text2</span><a href="">remove</a></p> <p><span>text3</span><a href="">remove</a></p> </div>

For such code, you can simply hang an editing event not on the paragraph itself, but on span with text. In this case, the edit input will appear in the span tag, and our removal link will remain intact.

Given the following HTML code:

<div id="parent"> <p><span>text1</span></p> <p><span>text2</span></p> <p><span>text3</span></p> </div>

Add a removal link at the end of each paragraph.

Make it so that by clicking on span an input for editing appears in it.

Now let there be no span tags initially:

<div id="parent"> <p>text1</p> <p>text2</p> <p>text3</p> </div>

First wrap the text of the paragraph in span tags, add editability to these tags, and then add a removal link at the end of each paragraph.

enru