Samtidig redigering og sletting av elementer
La oss si at vi har et sett med avsnitt:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
La oss for disse avsnittene gjøre det slik at det er mulig å redigere teksten i hvert avsnitt og samtidig at det på slutten av hvert avsnitt er en slettelenke.
Ved implementering av den beskrevne oppgaven vil vi møte et problem.
For å forstå essensen av problemet, la oss se på HTML-koden som vil resultere når slettelenker er lagt til på slutten av hvert avsnitt:
<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>
La oss nå tenke oss at ved et klikk på et hvilket som helst avsnitt vil det dukke opp et inputfelt for redigering av teksten. I dette tilfellet vil hele avsnittets tekst havne i inputfeltet - sammen med slettelenken!
Dette er selvfølgelig ikke riktig.
En bedre løsning vil være å pakke inn tekstene
i avsnittene i span-tagger, slik:
<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 en slik kode kan man enkelt legge til hendelser
for redigering ikke på selve avsnittet, men på
span med teksten. I dette tilfellet vil inputfeltet
for redigering vises i span-taggen,
og vår slettelenke vil forbli urørt.
Følgende HTML-kode er gitt:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Legg til en slettelenke på slutten av hvert avsnitt.
Gjør det slik at ved et klikk på span
vil det dukke opp et inputfelt for redigering i den.
La oss nå si at det i utgangspunktet ikke finnes span-tagger:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Pakk først inn avsnittsteksten i span-tagger,
legg til mulighet for redigering til disse taggene,
og legg deretter til en slettelenke på slutten av hvert avsnitt.
