Get the value of element that was clicked on then

问题:

I'm really stumped on this. I can add an item to my database by using a form just fine but how do I delete from it? I like to delete it either by clicking on it or clicking on it and then clicking the "remove" button.

Flask

@app.route('/', methods=["GET", "POST"])
def home():
    db = get_db()
    if request.method == "GET":
        return render_template("index.html")
    else:
        item = request.form['item']
        session['item'] = item
        quantity = request.form['quantity']
        session['quantity'] = quantity
        db.execute("INSERT INTO grocery_item (name, quantity) VALUES (?, ?)", [item, quantity])
        db.commit()

        cur = db.execute("SELECT name , quantity FROM grocery_item")
        results = cur.fetchall()
        return render_template("index.html", results = results

)

HTML form

<div class="container">
     <form method="POST" action="/">
        <div class="row">
            <div class="col">
                <input type="text" class="form-control my-1 mr-sm-2" placeholder="item" name="item" >
            </div>
            <div class="col" >
                  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref" name="quantity">
                    <option selected>Quantity</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                  </select>
            </div>
         </div>
        <div class="row">
            <div class="col">
                <button type="submit" class="btn-primary">Add</button>
            </div>
            <div class="col">
                <button type="submit" class="btn-primary">Remove</button>
            </div>
        </div>
    </form>
</div>

HTML List

{% for i in results%}
<div class="container pt-3 pb-3 bg-primary my-4 bg-gradient-light">
    <ul>
        <li>{{i.name}} {{i.quantity}}</li>
    </ul>
</div>
{% endfor%}

Webpage