I am trying to make a JS function inside of a button within a Django app that deletes a related database (SQLite3) entry

Question

I have a Django localhost web server that I've been experimenting with, and I'm doing the infamous "todo app" as my intro to a few topics.

Conceptually, the user puts their "todo item" into a text input field (which is a Django form that's inside of the Django HTML template). This action takes the text and puts it in an SQLite3 database and at the same time, the action creates a div container that has a paragraph tag and a button inside of that div. The P tag gets filled with the contents of the text given in the input. The button is meant to do two things; firstly, it deletes the parent div, which removes that button and the todo item. So, it's like a "this item is done" button, which deletes that item. That is working properly.

The SECOND function of the button, though, has got me stumped. The idea is to delete that item from the database as well, as that's where I store and retrieve the todo items from when the page is generated. I have attempted to do this by passing the {item} variable (which is a Django Template Language variable made inside of the Django view, which I will show below) into a delete function, which I am expecting should delete the associated database entry, by filtering for any item that contains the text within {item}. Now, I know this isn't a perfect method, but it's my first try. Please don't nitpick it too hard. It's not meant to be a customer-facing application, it's only an experiment to be used by me.

The problem: The button that should be deleting the associated database entry bypassing the {item} variable into a filter delete method for the database is throwing errors and is not working, despite me messing with the syntax endlessly. I'm clearly doing something wrong, but I don't know what, and the chrome dev tools error is REALLY not helping or making sense. I'd greatly appreciate any help.

The code: relevant django template section for the todo page/app:

    <div class="root-div container">
      <div class="app-div container">

        <div class="form-div container">
        <form method="post">
          {% csrf_token %}
          {{ form }}
          <button type="submit" class="btn">Post</button>
        </form>
      </div>

      <div class="tutorial-container container">
        <p class="container">Items will show up below.</p><hr></br>
      </div>


      <div class="todo-items-container container">
        {% for item in all_todo_items %}
          <div class="spawner container">
            <p class="item-container container">>: {{ item }}</p>
            <button class="delete-item-button btn" onclick="this.parentNode.remove();Todoitem.objects.filter(item={{ item }}).delete();">Del</button>
          </div>
        {% endfor %}

      </div>

The view associated with this app:

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseNotFound, HttpResponseRedirect #for handling basic responses

from .forms import TodoForm
from .models import Todoitem


def todo_view(request, *args):

    all_todo_items = Todoitem.objects.all #grabbing items from the db and putting them in a variable

    if request.method == "POST": #block for when info is being pushed thru view
        form = TodoForm(request.POST)
        if form.is_valid():
            form.save() #posts to db hopefully

    form = TodoForm()

    return render(request, 'todo/base.html', context={
                                                    "form": TodoForm,
                                                     "all_todo_items": all_todo_items})

The associated model:

# always makemigration and migrate when models are changed
class Todoitem(models.Model):
    #the modelform will pull from this list to populate the form fields/types/elements
    item = models.CharField(max_length=200, blank=True)

    def __str__(self):
        return self.item
    # when objects are called manually, they return their strings instead because of this

The error:

When I run this application and test it in chrome dev tools, this is what I get.

This makes little to no sense to me, and it doesn't really give me an obvious source of what the issue is, although I obviously suspect it involves the inline JS function I'm attempting to do, AKA

Todoitem.objects.filter(item={{ item }}).delete();

Again, I'd really appreciate any insight on what on earth is going wrong, whether it's a syntax thing, or I'm calling a variable in a method that doesn't work that way, or anything. Although, please be aware that I am a novice to this, and I haven't heavily used Javascript yet, and I am still quite new to the DOM and advanced Python stuff.

Thank you.

edit: I'm running Windows as my main OS, and the Django webserver is running Python 3.8.2, and Django 3.0.4. This is contained within a virtual environment. All other parts of the Django webserver work perfectly. It also boots up normally.