如何使用fetch API实现列表项的Delete删除按钮功能？

问题说明 #

我想给每个事件列表项添加“Delete”按钮，点击后删除页面上的对应条目，同时通过DELETE请求删除API中的数据，保留其余条目。现有代码的删除功能无法正确工作，需要调整。

修正步骤 #

• 传递目标事件ID：每个删除按钮需要明确要删除的事件，渲染按钮时要把对应事件的ID传给deleteItem函数。
• 修正DELETE请求地址：API的DELETE请求通常需要指定具体资源的URL（比如API_URL/事件ID），不能直接请求根地址。
• 同步页面状态：删除成功后重新拉取数据并渲染，确保页面与API数据一致。
• 添加错误处理：捕获删除请求中的异常，避免页面崩溃。

修改后的JavaScript代码 #

const API_URL = `你的API地址`; // 填写实际API地址

const state = {
  events: [],
};

const eventList = document.querySelector("#events");

const addEventForm = document.querySelector("#addEvent");
addEventForm.addEventListener("submit", addEvent);

async function render() {
  await getEvents();
  renderEvents();
}
render();

async function getEvents() {
  try {
    const response = await fetch(API_URL);
    const json = await response.json();
    state.events = json.data;
  } catch (error) {
    console.error(error);
  }
}

function renderEvents() {
  if (!state.events.length) {
    eventList.innerHTML = "<li>No events.</li>";
    return;
  }

  const eventCards = state.events.map((event) => {
    const li = document.createElement("li");
    // 传递事件ID给删除函数
    li.innerHTML = `
      <h2>${event.name}</h2>
      <p>${event.description}</p>
      <p>${event.date}</p>
      <p>${event.location}</p>
      <button onClick="deleteItem(${event.id})">Delete</button>
    `;
    return li;
  });

  eventList.replaceChildren(...eventCards);
}

async function addEvent(event) {
  event.preventDefault();

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: addEventForm.name.value,
        description: addEventForm.description.value,
        date: addEventForm.date.value,
        location: addEventForm.location.value,
      }),
    });

    if (!response.ok) {
      throw new Error("Failed to create event!");
    }

    render();
  } catch (error) {
    console.error(error);
  }
}

async function deleteItem(eventId) {
  try {
    // 拼接包含事件ID的删除请求地址
    const response = await fetch(`${API_URL}/${eventId}`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" }
    });

    if (!response.ok) {
      throw new Error("Failed to delete event!");
    }

    // 删除成功后重新渲染页面
    render();
  } catch (error) {
    console.error(error);
  }
}

注意事项 #

• 确保你的API支持通过DELETE /{eventId}的方式删除单个事件。
• 如果API返回的事件数据中没有id字段，替换成实际的唯一标识字段（比如_id）。

内容的提问来源于stack exchange，提问作者antjuh