Samtidig redigering og sletting av elementer

La oss si at vi har et sett med avsnitt:

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

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>

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:

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

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

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