Eyni Zamanda Redaktə və Elementlərin Silinməsi

Tutaq ki, müəyyən abzaslarımız var:

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

Gəlin bu abzaslar üçün hər bir abzasın mətnini redaktə edə biləcəyimizi və eyni zamanda hər bir abzasın sonunda silmə linki olacağı şəkildə edək.

Təsvir olunan tapşırığı həyata keçirərkən müəyyən problemlərlə qarşılaşacağıq.

Problemin mahiyyətini başa düşmək üçün gəlin hər bir abzasın sonuna silmə linkləri əlavə edildikdə alınacaq HTML koduna nəzər salaq:

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

İndi təsəvvür edək ki, hər hansı abzaza klik edildikdə onun içində mətn redaktəsi üçün input peyda olacaq. Bu halda inputa abzasın bütün mətni - silmə linki ilə birlikdə düşəcək!

Əlbəttə ki, bu düzgün deyil.

Daha uğurlu həll mətnləri span teqlərinə bu şəkildə əlavə etmək olardı:

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

Belə bir kod üçün sadəcə redaktə hadisəsini abzasın özünə deyil, mətn olan span üzərinə əlavə etmək olar. Bu halda redaktə inputu span teqində peyda olacaq, və bizim silmə linkimiz toxunulmamış qalacaq.

Aşağıdakı HTML kodu verilmişdir:

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

Hər bir abzasın sonuna silmə linki əlavə edin.

span üzərinə kliklənəndə onun içində redaktə inputunun peyda olmasını təmin edin.

Tutaq ki, indi əvvəlcədən span teqləri yoxdur:

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

Əvvəlcə abzas mətnini span teqlərinə əlavə edin, bu teqlərə redaktə imkanı verin, və sonra hər bir abzasın sonuna silmə linki əlavə edin.