Client-Side Delete Requests

Wiring the Big Red Button

We have our Admin Inbox view (with data-id attributes on the buttons) and our Express backend waiting for an HTTP DELETE verb. Standard HTML forms cannot send DELETE requests directly—they can only send GET or POST. To perform this mutation cleanly, we must rely on client-side JavaScript.

Using fetch() to Delete

We’ll attach an event listener to the entire document and listen for clicks. When a user clicks an element with the .js-delete-contact class, we fire our deletion logic.

This approach uses Event Delegation, which is much more efficient than attaching individual listeners to every single button.

const list = document.querySelector(".js-contacts-list");
if (!list) {
  // Script loaded on a page without the contacts list — bail quietly.
  // (Keeps things simple for multi-page admin areas.)
} else {
  // DELETE (click)
  list.addEventListener("click", async (e) => {
    const btn = e.target.closest("button.contact-delete");
    if (!btn) return;

    const li = btn.closest("li.js-contact");
    const id = li?.dataset.id;
    if (!id) return;

    const ok = confirm(
      "Delete this contact submission?\n\nThis cannot be undone.",
    );
    if (!ok) return;

    try {
      const res = await fetch(`/admin/contacts/${id}`, {
        method: "DELETE",
        headers: { Accept: "application/json" },
      });

      const data = await res.json().catch(() => ({}));

      if (!res.ok) {
        alert(data?.message || "Delete failed.");
        return;
      }

      li.remove();
    } catch (err) {
      alert("Network error. Delete failed.");
    }
  });
}

Always build guardrails around your destructive operations. A simple confirm() dialog might seem tedious, but it saves your users from destroying data over an accidental slip of the mouse. Of course, in a real-world app, you’d want to use a more sophisticated UI for this.

Extra Bits & Bytes

📘 Mongoose Delete Infographic (PNG)

MDN Web Docs: Using the Fetch API

⏭ Next: Updating Documents

Deleting a document handles the cleanup. But what about when we want to keep the document and just change its state—like marking a message as read?