| Semester_4 |
|---|
| 01_Introduction |
| 02_DeployAzure |
| 03_JSBasic |
| 04_OOP |
| 05_GET |
| 06_POST |
| 07_PUT |
| 08_PATCH |
| 09_DELETE |
| 10_FrontendTable |
| 11_FrontendAdd |
| 12_FrontendDelete |
| 13_FrontendEdit |
| 14_Database |
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}`;
}
}Do not forget.
Deploy.