একই সাথে উপাদান সম্পাদনা এবং মুছে ফেলা

ধরা যাক আমাদের কিছু অনুচ্ছেদের সেট আছে:

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

আসুন এই অনুচ্ছেদগুলির জন্য এমন ব্যবস্থা করি যাতে প্রতিটি অনুচ্ছেদের পাঠ্য সম্পাদনা করা যায় এবং একই সাথে প্রতিটি অনুচ্ছেদের শেষে থাকে মুছে ফেলার একটি লিঙ্ক।

বর্ণিত কাজটি বাস্তবায়ন করার সময় আমাদের একটি নির্দিষ্ট সমস্যার সম্মুখীন হতে হবে।

সমস্যাটির সারমর্ম বোঝার জন্য, আসুন HTML কোডটি দেখি যা পাওয়া যাবে, যখন প্রতিটি অনুচ্ছেদের শেষে যোগ করা হবে মুছে ফেলার লিঙ্ক:

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 ট্যাগের মধ্যে আবদ্ধ করা, এভাবে:

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

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