Я пытаюсь получить кнопку для удаления элемента из моей базы данных, а затем удалить его из списка на странице. Когда я нажимаю кнопку, ничего не происходит. Я говорю ему, чтобы он регистрировал сообщение «щелчок» при нажатии, но даже это не регистрируется. Вся функция даже не отправляет запрос на мой сервер. Это соответствующий код:
index. html
<style>
.hidden {
display: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 300px;
}
li {
clear: both;
}
li button {
-webkit-appearance: none;
border: none;
outline: none;
color: red;
float: right;
cursor: pointer;
font-size: 20px;
}
.lists-wrapper, .todos-wrapper {
display: inline-block;
vertical-align: top;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
}
li {
clear: both;
}
li button {
-webkit-appearance: none;
border: none;
outline: none;
color: red;
float: right;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
<body>
<div class="lists-wrapper">
<form method="POST" action="/todos/create" id="form">
<input type="text" id="description" name="description" />
<input type="submit" value="Create" />
</form>
<div id="error" class="hidden">Something went wrong</div>
<ul id="todos">
{% for d in data %}
<li><input class="check-completed" data-id="{{ d.id }}" type="checkbox" {% if d.completed %} checked {% endif %} />
{{d.description}}
<button class="delete-button" data-id="{{ d.id }}" >✗</button>
</li>
{% endfor %}
</ul>
</div>
const deleteBtns = document.querySelectorAll('.delete-button');
for (let i = 0; i < deleteBtns.length; i++) {
const btn = deleteBtns[i];
btn.onclick = function(e) {
console.log('click')
const todoId = e.target.dataset['id'];
fetch('/todos/' + todoId, {
method: 'DELETE'
})
.then(function() {
const item = e.target.parentElement;
item.remove();
})
}
}
app.py
@app.route('/todos/<todo_id>', methods=['DELETE'])
def delete_todo(todo_id):
try:
Todo.query.filter_by(id=todo_id).delete()
db.session.commit()
except:
db.session.rollback()
finally:
db.session.close()
return jsonify({'success': True })
Почему при нажатии кнопки ничего не происходит?