Как мне создать кнопку «Удалить», используя Fetch (API)? [дублировать] ⇐ Html

[Anonymous]

const API_URL = ` `;

const state = {
events: [],
};

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

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

/**
* Sync state with the API and rerender
*/
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 = "[*]No events.";
return;
}

const eventCards = state.events.map((event) => {
const li = document.createElement("li");
li.innerHTML = `
${event.name}
${event.description}
${event.date}
${event.location}
Delete
`;
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() {
const deleted = await fetch(API_URL, {
method: "DELETE",
headers: {"Content-Type": "application/json"}
});
}
< /code>
Я пытаюсь создать кнопку «Удалить», включенную во все мои списки, которые позволят мне удалить список на HTML и API, но сохраните остальные элементы в API и на экране. < /p>
Мне нужно использовать метод "Delete", но я не уверен, как мне нужно его реализовать. < /p>
Здесь это код для моего HTML и CSS, если это необходимо. < /P>





Party Planner




Events


Name



Description



Date/Time



Location


Add Event

< /code>
ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
}

li {
flex: 1 1 300px;
max-height: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: auto;
}

li img {
max-width: 100%;
max-height: 30%;
}
< /code>
What can I try next?

Подробнее здесь: https://stackoverflow.com/questions/783 ... g-fetchapi