Elementtien samanaikainen muokkaaminen ja poistaminen

Oletetaan, että meillä on joukko kappaleita:

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

Tehdään näille kappaleille niin, että jokaisen kappaleen tekstiä voi muokata ja samaan aikaan jokaisen kappaleen lopussa on linkki poistamista varten.

Kuvatun tehtävän toteutuksessa kohtaamme tietyn ongelman.

Ymmärtääksemme ongelman ytimen, katsotaan HTML-koodia, joka saadaan, kun jokaisen kappaleen loppuun on lisätty linkkejä poistamista varten:

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

Kuvitellaan nyt, että kun klikataan mitä tahansa kappaletta, siihen ilmestyy syöttökenttä tekstin muokkaamista varten. Tässä tapauksessa syöttökenttään menisi koko kappaleen teksti - mukaan lukien linkki poistamiseen!

Tämä ei tietenkään ole oikein.

Onneksi parempi ratkaisu olisi kääriä tekstien kappaleet span-tageihin, näin:

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

Tällaiselle koodille voidaan yksinkertaisesti asettaa tapahtuma muokkaamista varten ei itse kappaleelle, vaan span-tagille, jossa on teksti. Tässä tapauksessa syöttökenttä muokkaamista varten ilmestyy span-tagiin, ja poistolinkkimme pysyy koskemattomana.

Annettu on seuraava HTML-koodi:

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

Lisää linkki poistamista varten jokaisen kappaleen loppuun.

Tee niin, että kun span-tagia klikataan, siinä ilmestyy syöttökenttä muokkaamista varten.

Oletetaan nyt, että aluksi ei ole span-tageja:

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

Kääri ensin kappaleen teksti span-tageihin, lisää näille Tageille mahdollisuus muokata, ja sitten lisää jokaisen kappaleen loppuun linkki poistamista varten.