[Artem1985]

Помогите с написанием кода.
Имеется "приложение" таблица студентов.
По заданию необходимо:
1. Добавлять студентов на сервер (fetch(http://localhost:3000/api/students/ method: 'POST') - выполнил
2. При запуске приложения должен выводится список студентов на экран. - выполнил
3.Добавить кнопку "Удалить"(добавил), которая по нажатию будет удалять объект(студента) из базы и строку из таблицы (fetch(http://localhost:3000/api/students/{id} method: 'Delete').
Нужно реализовать удаления, а я не могу сообразить как это выполнить. Буду благодарен, если кто-нибудь поможет! {id} создается автоматически

В базу элементы добавляются в следующем виде:

[{"name":"Дмитрий","surname":"Старцев ","lastname":"Викторович","birthday":"Su n May 18 1986 06:00:00 GMT+0600 (Екатеринбург, летнее время)","studyStart":"2019","faculty":"Эле ктротехнический","id":"167818993780 1","updatedAt":"2023-03-07T11:52:17.801Z","createdAt":"2023-03-07T11:52:17.801Z"}]

document.addEventListener('DOMContentLoaded', async () => {
  async function getStudents() {
    const response = await fetch(`http://localhost:3000/api/students`);
    const data = await response.json();
    return data;
  }
  let objectsStudents = await getStudents();
  function createRow() {
    const container = document.getElementById('tbody');
    const row = document.createElement('tr');
    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');
    const td4 = document.createElement('td');
    let deleteButton = document.createElement('button');
    deleteButton.classList.add('btn', 'btn-danger');
    deleteButton.textContent = 'Удалить';
    row.append(td1);
    row.append(td2);
    row.append(td3);
    row.append(td4);
    row.append(deleteButton);
    container.append(row);
    return { row, td1, td2, td3, td4, deleteButton };
  }
   function createStudent(array) {
    document.getElementById('tbody').innerHTML = '';
    for (let i = 0; i < array.length; i++) {
      const now = new Date();
      const addRow = createRow();
      const finishEducation = Number(array[i].studyStart) + Number(4);
      const course = now.getFullYear() - Number(array[i].studyStart);
      addRow.td1.innerHTML = array[i].surname + ' ' + array[i].name + ' ' + array[i].lastname;
      addRow.td2.innerHTML = array[i].faculty;
      let date = new Date(array[i].birthday).getDate();
      if (date < 10) date = '0' + date;
      let month = new Date(array[i].birthday).getMonth() + 1;
      if (month < 10) month = '0' + month;
      const year = new Date(array[i].birthday).getFullYear();
      const born = new Date(year, month, date);
      const getAge = Math.floor((now.getTime() - born.getTime()) / 1000 / 60 / 60 / 24 / 365.25);
      addRow.td3.innerHTML = date + '.' + month + '.' + year + ' ( ' + getAge + ' лет ) ';
      addRow.td4.innerHTML = Number(array[i].studyStart) + ' - ' + finishEducation + ' ( ' + course + ' курс ) ';
      if (course >= 5) {
        addRow.td4.innerHTML = 'закончил';
      }
    }
    return array;
  }
  createStudent(objectsStudents);
  const newArray = objectsStudents.slice();
  document.querySelector('.table__th-button-name').addEventListener('click', function () {
    const result = newArray.sort((a, b) => (a.surname > b.surname ? 1 : -1));
    createStudent(result);
  });
  document.querySelector('.table__th-button-faculty').addEventListener('click', function () {
    const result = newArray.sort((a, b) => (a.faculty > b.faculty ? 1 : -1));
    createStudent(result);
  });
  document.querySelector('.table__th-button-birth').addEventListener('click', function () {
    const result = newArray.sort((a, b) => (a.birthday < b.birthday ? 1 : -1));
    createStudent(result);
  });
  document.querySelector('.table__th-button-education').addEventListener('click', function () {
    const result = newArray.sort((a, b) =>
      (a.studyStart < b.studyStart ? 1 : -1));
    createStudent(result);
  });
  const form = document.querySelector('.form-add');
  const fields = form.querySelectorAll('.form-control');
  const inputName = document.getElementById('input__name');
  const inputFaculty = document.getElementById('input__faculty');
  const inputBirth = document.getElementById('input__age');
  const inputStartEducation = document.getElementById('input__start-education');
  const date = new Date();
  function showError(message) {
    const error = document.createElement('div');
    error.classList.add('error');
    error.style.color = 'orange';
    error.innerHTML = message;
    return error;
  }
  function removeError() {
    const errors = form.querySelectorAll('.error');
    for (let i = 0; i < errors.length; i++) {
      errors[i].remove();
    }
  }
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    removeError();
    function getAgeInForm(birthDate) {
      const now = new Date();
      const born = new Date(
        birthDate.getFullYear(),
        birthDate.getMonth() + 1,
        birthDate.getDate(),
      );
      const diffInMilliseconds = now.getTime() - born.getTime();
      return Math.floor(diffInMilliseconds / 1000 / 60 / 60 / 24 / 365.25);
    }
    function formatDateInForm(dateInForm) {
      let d = dateInForm.getDate();
      if (d < 10) d = '0' + d;
      let m = dateInForm.getMonth() + 1;
      if (m < 10) m = '0' + m;
      const y = dateInForm.getFullYear();
      return d + '.' + m + '.' + y;
    }
    for (let i = 0; i < fields.length; i++) {
      if (!fields[i].value.trim() || fields[i].value.length < 3) {
        const error = showError('Заполните поле');
        fields[i].parentElement.insertBefore(error, fields[i]);
        return;
      }
    }
    if (inputBirth.valueAsDate > date) {
      const error = showError('Введите корректную дату!');
      inputBirth.parentElement.insertBefore(error, inputBirth);
      return;
    }
    if (inputStartEducation.value !== '' && inputStartEducation.value < 2000 || inputStartEducation.value > date.getFullYear()) {
      const error = showError('Не ранее 2000г, не позднее текущего года!');
      inputStartEducation.parentElement.insertBefore(error, inputStartEducation);
      return;
    }
    const addRow = createRow();
    addRow.td1.innerHTML = inputName.value;
    addRow.td2.innerHTML = inputFaculty.value;
    addRow.td3.innerHTML = formatDateInForm(new Date(inputBirth.value)) + ' ( ' + getAgeInForm(new Date(inputBirth.value)) + ' лет ) ';
    const finishEducation = Number(inputStartEducation.value) + Number(4);
    const course = date.getFullYear() - Number(inputStartEducation.value) + ' курс ';
    addRow.td4.innerHTML = inputStartEducation.value + ' - ' + finishEducation + ' ( ' + course + ' ) ';
    if (finishEducation < date.getFullYear()) {
      addRow.td4.innerHTML = 'закончил';
    }
    const split = inputName.value.split(' ');
    const objectsStudents = {};
    objectsStudents.name = split[1];
    objectsStudents.surname = split[0];
    objectsStudents.lastname = split[2];
    objectsStudents.birthday = new Date(inputBirth.value);
    objectsStudents.studyStart = inputStartEducation.value;
    objectsStudents.faculty = inputFaculty.value;
    inputName.value = '';
    inputFaculty.value = '';
    inputBirth.value = '';
    inputStartEducation.value = '';
    let response = await fetch(`http://localhost:3000/api/students`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: `${objectsStudents.name}`,
        surname: `${objectsStudents.surname}`,
        lastname: `${objectsStudents.lastname}`,
        birthday: `${objectsStudents.birthday}`,
        studyStart: `${objectsStudents.studyStart}`,
        faculty: `${objectsStudents.faculty}`
      })
    });
    const result = await response.json();
    objectsStudents.push(result);
  });
  function filterName(objectsStudents, val) {
    if (val !== "") {
      return objectsStudents.filter(f => (f.surname + f.name + f.lastname).toLowerCase().includes(val.toLowerCase()));
    } else {
      return objectsStudents;
    }
  }
  function filterFaculty(objectsStudents, val) {
    if (val !== "") {
      return objectsStudents.filter(f => f.faculty.toLowerCase().includes(val.toLowerCase()));
    } else {
      return objectsStudents;
    }
  }
  function filterStartEducation(objectsStudents, key, val) {
    if (val != "") {
      return objectsStudents.filter(el => String(el[key]).toLowerCase().includes(val));
    } else {
      return objectsStudents;
    }
  }
  function filterFinishEducation(objectsStudents, key, val) {
    if (val != "") {
      return objectsStudents.filter(el => String(el[key]).toLowerCase().includes(val));
    } else {
      return objectsStudents;
    }
  }
  let idTimeout;
  document.addEventListener("keyup", function (event) {
    clearTimeout(idTimeout);
    idTimeout = setTimeout(function () {
      filterAndUpdate(event);
    }, 300);
  })
  function filterAndUpdate(event) {
    if (event.target && event.target.matches('input#name')) {
      createStudent(filterName(objectsStudents, event.target.value));
    }
    if (event.target && event.target.matches('input#faculty')) {
      createStudent(filterFaculty(objectsStudents, event.target.value));
    }
    if (event.target && event.target.matches('input#startEducation')) {
      createStudent(filterStartEducation(objectsStudents, "studyStart", event.target.value));
    }
    if (event.target && event.target.matches('input#finishEducation')) {
      createStudent(filterFinishEducation(objectsStudents, "finishEducation", event.target.value));
    }
  }
});