Modifica e eliminazione simultanea di elementi
Supponiamo di avere un insieme di paragrafi:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Per questi paragrafi, facciamo in modo che si possa modificare il testo di ogni paragrafo e che alla fine di ogni paragrafo ci sia un link per l'eliminazione.
Nell'implementazione del compito descritto ci aspetta un certo problema.
Per capire l'essenza del problema, diamo un'occhiata al codice HTML che risulterà quando alla fine di ogni paragrafo saranno aggiunti i link per l'eliminazione:
<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>
Immaginiamo ora che cliccando su qualsiasi paragrafo appaia un input per la modifica del testo. In questo caso, nell'input finirebbe tutto il testo del paragrafo - incluso il link per l'eliminazione!
Questo, ovviamente, non è corretto.
Una soluzione più appropriata sarebbe avvolgere i testi
dei paragrafi in tag span, in questo modo:
<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>
Per un codice così, si può semplicemente assegnare l'evento
per la modifica non al paragrafo stesso, ma allo
span con il testo. In questo caso l'input
per la modifica apparirà nel tag
span, e il nostro link per l'eliminazione rimarrà
intatto.
È dato il seguente codice HTML:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Aggiungi un link per l'eliminazione alla fine di ogni paragrafo.
Fai in modo che cliccando sullo span
appaia un input per la modifica al suo interno.
Supponiamo ora che inizialmente non ci siano tag span:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Avvolgi prima il testo del paragrafo nei tag span,
aggiungi a questi tag la possibilità di modifica,
e poi aggiungi alla fine di ogni paragrafo un link
per l'eliminazione.
