106- آموزش جاوااسکریپت | پروژه عملی قسمت 7 از 8: پیاده‌سازی حذف پست‌ها در پروژه Micro Posts

در این بخش، قابلیت حذف پست‌ها را به پروژه اضافه می‌کنیم. هدف این است که کاربر با کلیک روی آیکن حذف، بتواند یک پست را از JSON Server پاک کند و نتیجه را بلافاصله در رابط کاربری ببیند.

این بخش نسبت به ویرایش پست‌ها ساده‌تر است، چون فقط باید رویداد کلیک را مدیریت کنیم، شناسه پست را به دست آوریم و یک درخواست DELETE به API بفرستیم.

ثبت رویداد حذف پست

ابتدا در فایل app.js روی بخش نمایش پست‌ها یک رویداد click قرار می‌دهیم. چون دکمه‌های حذف به‌صورت پویا ساخته می‌شوند، از event delegation استفاده می‌کنیم.

document.querySelector("#posts").addEventListener("click", deletePost);

سپس تابع deletePost را تعریف می‌کنیم:

function deletePost(e) {
  e.preventDefault();

  console.log("delete");
}

در این مرحله فقط مطمئن می‌شویم که کلیک روی آیکن حذف به‌درستی شناسایی می‌شود.

بررسی دکمه حذف با event delegation

از آنجا که کاربر روی آیکن داخل لینک کلیک می‌کند، باید عنصر والد را بررسی کنیم تا مشخص شود کلیک روی دکمه حذف انجام شده است یا نه.

function deletePost(e) {
  e.preventDefault();

  if (e.target.parentElement.classList.contains("delete")) {
    console.log("delete");
  }
}

در اینجا e.target همان آیکن است و parentElement به لینک حذف اشاره می‌کند.

دریافت شناسه پست

در ماژول ui برای هر دکمه حذف، ویژگی data-id قرار داده‌ایم. حالا می‌توانیم شناسه پست را از همان ویژگی دریافت کنیم:

function deletePost(e) {
  e.preventDefault();

  if (e.target.parentElement.classList.contains("delete")) {
    const id = e.target.parentElement.dataset.id;
  }
}

به این ترتیب مشخص می‌شود کدام پست باید حذف شود.

نمایش پیام تایید قبل از حذف

قبل از ارسال درخواست حذف، بهتر است از کاربر تایید بگیریم:

function deletePost(e) {
  e.preventDefault();

  if (e.target.parentElement.classList.contains("delete")) {
    const id = e.target.parentElement.dataset.id;

    if (confirm("Are You Sure?")) {
      // delete request
    }
  }
}

این کار از حذف ناخواسته پست‌ها جلوگیری می‌کند.

ارسال درخواست DELETE به API

حالا اگر کاربر حذف را تایید کند، با استفاده از ماژول http درخواست DELETE را ارسال می‌کنیم:

function deletePost(e) {
  e.preventDefault();

  if (e.target.parentElement.classList.contains("delete")) {
    const id = e.target.parentElement.dataset.id;

    if (confirm("Are You Sure?")) {
      http
        .delete(`http://localhost:3000/posts/${id}`)
        .then(data => {
          ui.showAlert("Post Removed", "alert alert-success");
          getPosts();
        })
        .catch(err => console.log(err));
    }
  }
}

در اینجا از template literal استفاده شده تا شناسه پست به انتهای آدرس API اضافه شود.

به‌روزرسانی رابط کاربری بعد از حذف

بعد از حذف موفق پست، دو کار انجام می‌دهیم:

• با ui.showAlert() یک پیام موفقیت نمایش می‌دهیم.
• با فراخوانی getPosts() دوباره فهرست پست‌ها را از API می‌گیریم تا رابط کاربری به‌روز شود.

به این ترتیب، پست حذف‌شده بلافاصله از صفحه ناپدید می‌شود.

کد کامل حذف پست در app.js

کد نهایی این بخش به شکل زیر است:

document.querySelector("#posts").addEventListener("click", deletePost);

function deletePost(e) {
  e.preventDefault();

  if (e.target.parentElement.classList.contains("delete")) {
    const id = e.target.parentElement.dataset.id;

    if (confirm("Are You Sure?")) {
      http
        .delete(`http://localhost:3000/posts/${id}`)
        .then(data => {
          ui.showAlert("Post Removed", "alert alert-success");
          getPosts();
        })
        .catch(err => console.log(err));
    }
  }
}

جمع‌بندی

در این آموزش، قابلیت حذف پست‌ها را به پروژه اضافه کردیم. برای این کار:

• روی بخش نمایش پست‌ها رویداد click ثبت کردیم
• با event delegation دکمه حذف را شناسایی کردیم
• شناسه پست را از data-id گرفتیم
• قبل از حذف، از کاربر تایید گرفتیم
• درخواست DELETE به JSON Server فرستادیم
• بعد از حذف، پیام موفقیت نمایش دادیم
• فهرست پست‌ها را دوباره بارگذاری کردیم

در بخش بعدی، ویرایش پست‌ها را پیاده‌سازی می‌کنیم که مهم‌ترین بخش این پروژه است.