Ошибка 404 не найден URL-адрес Django с функцией выборки JavaScript

Я создаю приложение Todo с помощью Django и JavaScript. Я дошел до того, что когда я нажимаю кнопку "корзина", заметка должна быть удалена, но в консоли отображается ошибка, причина для чего, мне непонятно, так как я указал правильный URL-путь. Ошибка появляется, когда я нажимаю на кнопку "корзина".

urlpatterns = [
    path('', views.index, name="index"),
    path('add_note/', views.add_note, name="add_note"),
    path('del_note/<int:id>/', views.del_note, name="del_note"),
]

Также создана функция просмотра в Django для удаления заметки.

@require_POST
def del_note(request, id):
    del_obj = get_object_or_404(Note, id=id, user=request.user)
    del_obj.delete()

    return JsonResponse({"status": 200, "message": "Note deleted"})

А вот HTML-код списка с кнопкой "корзина".

<ul class="todo__list">
  {% for note in notes %}
  <li class="todo__note flex" data-id="{{ note.id }}">
    <div>
      <input type="checkbox" />
      <span>{{ note.text }}</span>
    </div>
    <div class="delete__edit">
      <button class="edit-btn" id="editBtn" type="button">
        <img src="{% static 'images/edit.svg' %}" alt="" />
      </button>
      <button class="delete-btn" id="deleteBtn" type="button">
        <img src="{% static 'images/delete.svg' %}" alt="" />
      </button>
    </div>
  </li>
  {% endfor %}
</ul>

А это функция JS fetch для отправки запроса по пути django urls "del_note".

const noteList = document.querySelector(".todo__list"); 
    //const delUrl = document.body.dataset.delNoteUrl;

    function getCSRFToken() {
      const tokenInput = document.querySelector("input[name='csrfmiddlewaretoken']");
      return tokenInput ? tokenInput.value : "";
    }

    noteList.addEventListener("click", (e) => {
      const deleteBtn = e.target.closest(".delete-btn"); 
      // if (!deleteBtn) return;

      const parentLi = deleteBtn.closest(".todo__note");
      const noteId = parentLi.getAttribute("data-id");

      console.log("Note id:", noteId); // 2 for example

      fetch(`/del_note/${noteId}/`, {
        method: "POST",
        headers: {
          "X-CSRFToken": getCSRFToken(),
        },
      })
        .then((res) => {
          if (!res.ok) {
            throw new Error(`HTTP error ${res.status}`);
          }
          return res.json();
        })
        .then((data) => {
          if (data.status === 200) {
            parentLi.remove();
          } else {
            alert("Fail to delete the note.");
          }
        })
        .catch((err) => {
          console.error("Error:", err);
        });
    });

Ошибка изображение находится здесь.

введите описание изображения здесь

Вернуться на верх