Ταυτόχρονη επεξεργασία και διαγραφή στοιχείων

Ας υποθέσουμε ότι έχουμε ένα σύνολο παραγράφων:

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

Ας φανταστούμε τώρα ότι με κλικ σε οποιαδήποτε παράγραφο, εμφανίζεται ένα πεδίο εισαγωγής για επεξεργασία του κειμένου. Σε αυτή την περίπτωση, στο πεδίο εισαγωγής θα μπει όλο το κείμενο της παραγράφου - μαζί με τον σύνδεσμο διαγραφής!

Αυτό, φυσικά, δεν είναι σωστό.

Μια πιο επιτυχημένη λύση θα ήταν να τυλίξουμε τα κείμενα των παραγράφων σε ετικέτες 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>

Για έναν τέτοιο κώδικα, μπορούμε απλά να προσθέσουμε ένα event για επεξεργασία όχι στην ίδια την παράγραφο, αλλά στο 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, προσθέστε σε αυτές τις ετικέτες τη δυνατότητα επεξεργασίας, και στη συνέχεια προσθέστε στο τέλος κάθε παραγράφου έναν σύνδεσμο για διαγραφή.