ელემენტების ერთდროული რედაქტირება და წაშლა

დავუშვათ, გვაქვს აბზაცების გარკვეული ნაკრები:

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

მოდით, ამ აბზაცებისთვის გავაკეთოთ ისე, რომ შესაძლებელი იყოს თითოეული აბზაცის ტექსტის რედაქტირება და ამასთანავე ყოველი აბზაცის ბოლოს იყოს ბმული წაშლისთვის.

აღწერილი ამოცანის განხორციელებისას გარკვეული პრობლემა გველის.

იმისათვის, რომ გავიგოთ პრობლემის არსი, მოდით შევხედოთ 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>

ახლა წარმოვიდგინოთ, რომ ნებისმიერ აბზაცზე დაწკაპუნებით მასში გამოჩნდება ველი რედაქტირებისთვის. ამ შემთხვევაში ველში მოხვდება მთელი აბზაცის ტექსტი - წაშლის ბმულთან ერთად!

ეს, რა თქმა უნდა, არასწორია.

უფრო წარმატებული გადაწყვეტა იქნება ტექსტების შეფუთვა span თეგებში, ასე:

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

ასეთი კოდისთვის შესაძლებელია უბრალოდ დავამატოთ მოვლენა რედაქტირებისთვის არა თავად აბზაცზე, არამედ span ტეგზე ტექსტთან ერთად. ამ შემთხვევაში ველი რედაქტირებისთვის გამოჩნდება span თეგში, და ჩვენი ბმული წაშლისთვის დარჩება უცვლელი.

მოცემულია შემდეგი HTML კოდი:

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

დაამატეთ ბმული წაშლისთვის ყოველი აბზაცის ბოლოს.

გააკეთეთ ისე, რომ span-ზე დაწკაპუნებით მასში გამოჩნდეს ველი რედაქტირებისთვის.

დავუშვათ, ახლა თავდაპირველად span თეგები არ არის:

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

ჯერ შეფუთეთ აბზაცის ტექსტი span თეგებში, დაამატეთ ამ თეგებს რედაქტირების შესაძლებლობა, შემდეგ კი დაუმატეთ ყოველი აბზაცის ბოლოს ბმული წაშლისთვის.