Implement deleting lists

todo_app/static/style.css

@@ -19,3 +19,16 @@ table td {
 li.checklist {
 	list-style-type: none;
 }
+
+.delete-label {
+	text-decoration: underline;
+}
+
+.delete-checkbox {
+	visibility: hidden;
+}
+
+.delete-checkbox:checked ~ label {
+	text-decoration: line-through red;
+	color: red;
+}

todo_app/templates/todo.html

@@ -27,7 +27,12 @@ This todo list is past deadline. You cannot change it.
         type="checkbox" id="item-{{ i.id }}" name="todo" value={{ i.id }}
         {% if i.status %} checked {% endif %}
         {% if past %} disabled {% endif %}>
-    <label for="item-{{ i.id }}">{{ i.name }}</label>
+      <label for="item-{{ i.id }}">{{ i.name }}</label>
+      <input
+        class="delete-checkbox"
+        type="checkbox" id="delete-{{ i.id }}" name="delete" value={{ i.id }}
+        {% if past %} disabled {% endif %}>
+      <label class="delete-label" for="delete-{{ i.id }}">Delete</label>
     </li>
     {% endfor %}
   </ul>

todo_app/views.py

@@ -40,10 +40,15 @@ def view_list(request, list_id):
         return redirect('todo', list_id)
     try:
         checked = request.POST.copy().pop('todo')
+        deleted = request.POST.copy().pop('delete')
     except KeyError:
         checked = []  # nothing is checked
+        deleted = []
     for item in context['items']:
-        if str(item['id']) in checked and not item['status']:
+        if str(item['id']) in deleted:
+            endpoint = API_BASE % f'/items/{item["id"]}/'
+            requests.delete(endpoint)
+        elif str(item['id']) in checked and not item['status']:
             endpoint = API_BASE % f'/items/{item["id"]}/'
             requests.patch(endpoint, json={'status': True})
         elif str(item['id']) not in checked and item['status']: