How to delete a bootstrap card on button click? - html

Question

I am new bootstrap & flask.
I am getting response from flask api of 20 rows & displaying using bootstrap card like this -
<div class="row">
{% for item in data %}
<div class="card" style="width: 25rem;">
{% if item[6] == '' or item[6] == ' ' %}
<img src='static/pic_not_avl.png' class="card-img-top" alt="pic"><i class="bi bi-person-circle"></i></img>
{% else %}
<img src='static/{{item[6]}}' class="card-img-top" alt="pic"><i class="bi bi-person-circle"></i></img>
{% endif %}
<div class="card-body">
<h5 class="card-title text-center">{{item[0]}}</h5>
<p class="card-text text-center">{{item[7]}}</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>State : </strong>{{item[1]}}</li>
<li class="list-group-item"><strong>Salary : </strong>{{item[2]}}</li>
<li class="list-group-item"><strong>Grade : </strong>{{item[3]}}</li>
<li class="list-group-item"><strong>Room : </strong>{{item[4]}}</li>
<li class="list-group-item"><strong>Telnum : </strong>{{item[5]}}</li>
</ul>
<div class="card-body text-center">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#updateModal">Update</button>
<!-- <button type="submit" class="btn btn-danger">Delete</button> -->
<a class="btn btn-danger" href="/deleteDatail?dname={{item[0]}}" role="button">Delete</a>
</div>
</div>
{% endfor %}
</div>
Now i want to delete a card (one data) on button click.
tried like this -
<a class="btn btn-danger" href="/deleteDatail?dname={{item[0]}}" role="button">Delete</a>
But I am getting error Method not allowed
How can I resolve this?

Answer 1

/deleteDatail?dname={{item[0]}} implies a GET call to your flask route. The error Method not allowed means your route does not support a GET. You have to do something like
#app.route("/deleteDetail/")
def deleteDetail():
dname = request.values.get("dname", None)
or you can do
#app.route("/deleteDetail/", methods = ["GET", "POST"])
def deleteDetail():
if request.method == 'POST':
dname = request.values.get("dname", None)