Gleichzeitiges Bearbeiten und Löschen von Elementen

Nehmen wir an, wir haben eine Reihe von Absätzen:

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

Lassen Sie uns für diese Absätze Folgendes ermöglichen: den Text jedes Absatzes bearbeiten zu können und gleichzeitig am Ende jedes Absatzes einen Link zum Löschen zu platzieren.

Bei der Implementierung der beschriebenen Aufgabe erwarten uns einige Probleme.

Um das Wesentliche des Problems zu verstehen, schauen wir uns den HTML-Code an, der entsteht, wenn am Ende jedes Absatzes Lösch-Links hinzugefügt werden:

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

Stellen wir uns nun vor, dass bei einem Klick auf einen beliebigen Absatz in diesem ein Eingabefeld zur Bearbeitung des Textes erscheint. In diesem Fall würde der gesamte Text des Absatzes in das Eingabefeld übernommen - einschließlich des Lösch-Links!

Das ist natürlich nicht richtig.

Eine bessere Lösung wäre, die Texte der Absätze in span-Tags zu verpacken, etwa so:

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

Für einen solchen Code kann man einfach ein Ereignis für die Bearbeitung nicht auf den Absatz selbst, sondern auf das span mit dem Text legen. In diesem Fall erscheint das Eingabefeld zur Bearbeitung im span-Tag, und unser Lösch-Link bleibt unberührt.

Gegeben ist der folgende HTML-Code:

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

Fügen Sie am Ende jedes Absatzes einen Lösch-Link hinzu.

Sorgen Sie dafür, dass bei einem Klick auf das span ein Eingabefeld zur Bearbeitung erscheint.

Nehmen wir nun an, dass zunächst keine span-Tags vorhanden sind:

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

Packen Sie zuerst den Text des Absatzes in span-Tags, fügen Sie zu diesen Tags die Bearbeitungsfunktionalität hinzu, und fügen Sie dann am Ende jedes Absatzes einen Lösch-Link hinzu.