Samtidig redigering och borttagning av element
Låt oss säga att vi har en uppsättning stycken:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Låt oss för dessa stycken göra så att man kan redigera texten i varje stycke och samtidigt i slutet av varje stycke finns det en länk för borttagning.
När vi implementerar den beskrivna uppgiften möter vi ett visst problem.
För att förstå problemets kärna, låt oss titta på HTML-koden som kommer att resultera när länkar för borttagning läggs till i slutet av varje stycke:
<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>
Föreställ dig nu att vid klick på vilket stycke som helst kommer en inmatningsruta för redigering av texten att visas i det. I detta fall kommer hela styckets text att hamna i inmatningsrutan - inklusive länken för borttagning!
Detta är naturligtvis inte korrekt.
Ett bättre beslut skulle vara att omsluta texterna
i styckena med span-taggar, så här:
<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 en sådan kod kan du helt enkelt lägga en händelse
för redigering inte på själva stycket, utan på
span med texten. I detta fall kommer inmatningsrutan
för redigering att visas i taggen
span, och vår länk för borttagning kommer att förbli
orörd.
Följande HTML-kod ges:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Lägg till en länk för borttagning i slutet av varje stycke.
Gör så att vid klick på span
visas en inmatningsruta för redigering i den.
Låt oss nu säga att det från början inte finns några span-taggar:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Omslut först styckets text i span- taggar,
lägg till möjligheten att redigera till dessa taggar,
och lägg sedan till en länk för borttagning
i slutet av varje stycke.
