12_FrontendDelete
Code-Dateien
| Dateiname | Aktion |
|---|---|
| CODECode_bank.zip | Download |
| CODECode_pizza.zip | Download |
| CODECode_student.zip | Download |
Videos
| Dateiname | Aktion |
|---|---|
| VIDEOVideo_Bank_D | Abspielen |
| VIDEOVideo_Pizza_E | Abspielen |
Lernmaterialien
Delete Button
Add a Delete Button in the table.
app.js:
async function fetchStudents() {
...
const tdCourse = document.createElement("td");
tdCourse.textContent = s.course;
const delBtn = document.createElement("button");
delBtn.textContent = "Delete";
delBtn.className = "delete-btn";
delBtn.onclick = async () => {
if (!confirm(`Remove student ${s.name}?`)) return;
await deleteStudent(s.id);
await fetchStudents();
};
tr.append(tdId, tdName, tdCourse, delBtn);
tbody.appendChild(tr);
}Add the functionality:
app.js:
async function deleteStudent(id) {
const statusEl = document.getElementById("status");
try {
const res = await fetch(`/students/${id}`, { method: "DELETE" });
if (res.status === 204) {
statusEl.textContent = `Student ${id} removed.`;
} else {
throw new Error(msg.error || `HTTP ${res.status}`);
}
} catch (err) {
console.error(err);
statusEl.textContent = `Error while removing: ${err.message}`;
}
}GIT
Do not forget.
Azur
Deploy.