42- آموزش جاوااسکریپت | پروژه عملی :قسمت 4 از 6 -پیاده‌سازی قابلیت حذف کتاب از لیست (Event Delegation)

در این بخش از آموزش، قصد داریم قابلیت حذف کتاب‌ها را به پروژه اضافه کنیم. برای حذف یک سطر از جدول، کاربر روی دکمه "X" کلیک می‌کند. نکته مهم این است که این دکمه‌ها به‌صورت داینامیک ایجاد می‌شوند و در هنگام لود شدن صفحه وجود ندارند؛ بنابراین نمی‌توانیم مستقیماً به آن‌ها Event Listener اضافه کنیم. در چنین شرایطی باید از تکنیک Event Delegation استفاده کنیم.

پیاده‌سازی Event Delegation

به جای انتخاب دکمه حذف، رویداد کلیک را به والدِ آن یعنی تگ tbody با آی‌دی book-list متصل می‌کنیم. با این کار، هر کلیکی که در لیست انجام شود، توسط این المان والد شنیده می‌شود.

// Event Listener برای لیست کتاب‌ها
document.getElementById('book-list').addEventListener('click', function(e) {
  const ui = new UI();
  
  // فراخوانی متد حذف
  ui.deleteBook(e.target);
  
  // نمایش پیام حذف
  ui.showAlert('کتاب با موفقیت حذف شد', 'success');

  e.preventDefault();
});

افزودن متد deleteBook به Prototype

اکنون باید متد حذف را به پروتوتایپ کلاس UI اضافه کنیم. در این متد، ابتدا بررسی می‌کنیم که آیا کاربر دقیقاً روی دکمه حذف (که کلاس delete دارد) کلیک کرده است یا خیر. سپس با استفاده از پیمایش در DOM، به سطر مربوطه رسیده و آن را حذف می‌کنیم.

UI.prototype.deleteBook = function(target) {
  // بررسی کلاس المان کلیک شده
  if (target.className === 'delete') {
    // پیمایش DOM: لینک (target) -> ستون (td) -> سطر (tr)
    target.parentElement.parentElement.remove();
  }
};

توضیح پیمایش DOM:

1. target: المان <a> است که روی آن کلیک شده.
2. target.parentElement: به تگ <td> می‌رسیم.
3. target.parentElement.parentElement: به تگ اصلی یعنی <tr> می‌رسیم که کل سطر کتاب است.
4. remove(): کل سطر را از DOM حذف می‌کند.

جمع‌بندی

با استفاده از تکنیک Event Delegation، توانستیم به‌سادگی المان‌هایی را مدیریت کنیم که به‌صورت داینامیک به صفحه اضافه شده‌اند. با این کار، سیستم CRUD (ایجاد، خواندن، به‌روزرسانی و حذف) برنامه تکمیل شد. در بخش بعدی، این پروژه را بازبینی کرده و ساختار آن را به کلاس‌های مدرن ES6 ارتقا می‌دهیم.