একই সাথে উপাদান সম্পাদনা এবং মুছে ফেলা
ধরা যাক আমাদের কিছু অনুচ্ছেদের সেট আছে:
<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 ট্যাগের মধ্যে আবদ্ধ করুন,
এই ট্যাগগুলিতে সম্পাদনার ক্ষমতা যোগ করুন,
এবং তারপর প্রতিটি অনুচ্ছেদের শেষে মুছে ফেলার লিঙ্ক
যোগ করুন।
