要素の同時編集と削除

いくつかの段落のセットがあるとします：

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

これらの段落について、各段落のテキストを編集可能にし、かつ各段落の末尾に削除リンクを配置するようにしましょう。

上記のタスクを実装する際、ある問題が発生します。

問題の本質を理解するために、各段落の末尾に削除リンクが追加されたときのHTMLコードを見てみましょう：

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

ここで、どの段落をクリックしても、その中に編集用の入力欄（input）が表示されるとします。この場合、入力欄には段落全体のテキスト（削除リンクを含む！）が入ってしまいます。

これはもちろん正しくありません。

より良い解決策は、段落のテキストをspanタグで囲むことです。次のようになります：

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

このコードでは、編集イベントを段落自体ではなく、テキストを持つspanに設定するだけで済みます。この場合、編集用の入力欄はspanタグ内に表示されるため、削除リンクはそのまま残ります。

次のHTMLコードがあるとします：

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

各段落の末尾に削除リンクを追加してください。

spanをクリックすると、その中に編集用の入力欄が表示されるようにしてください。

今度は、最初からspanタグがない状態とします：

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

まず、段落のテキストをspanタグで囲み、これらのタグに編集機能を追加してください。その後、各段落の末尾に削除リンクを追加してください。