Aynı Anda Öğeleri Düzenleme ve Silme

Bir dizi paragrafımız olduğunu varsayalım:

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

Bu paragraflar için, her paragrafın metnini düzenleyebileceğimiz ve aynı zamanda her paragrafın sonunda bir silme bağlantısı bulunacak şekilde ayarlayalım.

Açıklanan görevi uygularken karşılaşacağımız bir sorun var.

Sorunun özünü anlamak için, her paragrafın sonuna silme bağlantıları eklendiğinde ortaya çıkacak HTML koduna bir göz atalım:

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

Şimdi, herhangi bir paragrafa tıklandığında, içinde metni düzenlemek için bir giriş kutusu belireceğini hayal edelim. Bu durumda, giriş kutusuna tüm paragraf metni - silme bağlantısıyla birlikte! - gelecektir.

Bu, elbette ki doğru değil.

Daha iyi bir çözüm, paragraf metinlerini span etiketleri içine almak olacaktır, şu şekilde:

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

Böyle bir kod için, düzenleme olayını doğrudan paragrafın kendisine değil, metin içeren span etiketine eklemek yeterlidir. Bu durumda, düzenleme için giriş kutusu span etiketinin içinde belirecek ve silme bağlantımız etkilenmemiş olacak.

Aşağıdaki HTML kodu verilmiştir:

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

Her paragrafın sonuna bir silme bağlantısı ekleyin.

span etiketine tıklandığında, içinde düzenleme yapmak için bir giriş kutusu belirmesini sağlayın.

Şimdi, başlangıçta span etiketleri olmadığını varsayalım:

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

Önce paragraf metnini span etiketleri içine alın, bu etiketlere düzenleme özelliği ekleyin, ve ardından her paragrafın sonuna bir silme bağlantısı ekleyin.