Welcome back! So far, you've done an excellent job building your ToDo application with Flask. You've learned how to set up your project, create and list ToDo items, and even update existing ToDos. In this lesson, we'll complete the core functionality of your app by allowing users to delete ToDo items. This is a crucial feature, enabling users to efficiently manage their list of tasks by removing those they no longer need.

First, let's focus on the TodoService class and the delete method. This method will allow us to remove todo items from the list.

Python
Copy to clipboard
1class TodoService:
2
3    # Constructor and other methods...
4
5    # Method to delete an item using its ID
6    def delete(self, todo_id):
7        # Retrieve the todo item by its ID
8        todo = self.get_by_id(todo_id)
9        if todo:
10            # Remove the matching todo item from the list
11            self._todos.remove(todo)
12            return True
13        return False

The delete method uses the get_by_id to find the item by its ID, then removes it from the list. If the item is found and deleted, the method returns True; otherwise, it returns False.

Now, let's move on to the controller layer, where we will create a new route for deleting todo items.

Python
Copy to clipboard
1from flask import Blueprint, redirect, url_for
2from services.todo_service import TodoService
3
4todo_service = TodoService()
5todo_controller = Blueprint('todo', __name__)
6
7# Routes for listing, adding, and updating items...
8
9# Route for deleting a specific todo item
10@todo_controller.route('/delete/<int:todo_id>', methods=['POST'])
11def delete(todo_id):
12    # Call the delete method in the service layer
13    todo_service.delete(todo_id)
14    # Redirect to the list of todos after deletion
15    return redirect(url_for('todo.list_todos'))

The delete route handles deletion requests by calling the delete method in TodoService to remove the specific todo item with the given ID and then redirects back to the main todo list. Similarly to the update route, it uses URL parameters to capture the item ID and utilizes the POST method, as HTML forms do not support other HTTP methods such as DELETE.

Next, we need to update our HTML template to include a delete button for each todo item. This button will send a POST request to the delete route when clicked.

Here's the updated todo_list.html template:

HTML, XML
Copy to clipboard
1<ul>
2    {% for todo in todos %}
3        <li>
4            <strong>{{ todo.title }}</strong>: {{ todo.description }}
5            <a href="{{ url_for('todo.edit_todo', todo_id=todo.todo_id) }}">Edit</a>
6            <!-- Form for deleting a specific todo item -->
7            <form action="{{ url_for('todo.delete', todo_id=todo.todo_id) }}" method="POST" style="display: inline;">
8                <!-- Button to submit the form and delete the todo item -->
9                <button type="submit">Delete</button>
10            </form>
11        </li>
12    {% endfor %}
13</ul>

For each todo item in the list, we create a form with a delete button. The form sends a POST request to the delete route at url_for('todo.delete', todo_id=todo.todo_id). Using the method="POST" attribute ensures that the form submission performs the delete action. The style="display: inline;" attribute makes the form appear inline with the edit link, ensuring a clean and user-friendly layout.

These changes enable users to delete todo items directly from the list view by clicking the delete button.

Let's walk through an end-to-end example to ensure everything works seamlessly:

1. Initiate Delete:

   • From the list view, click the "Delete" button next to a todo item. This action will submit a POST request to the /delete/<int:todo_id> route using the item's ID.

2. Delete Processing:

   • The delete method in TodoService is called to remove the item based on its ID.
   • After deletion, the user is redirected back to the main todo list view.

In this lesson, you learned how to enable users to delete ToDo items in your Flask application. We covered:

• The delete method in the service layer.
• Handling deletion in the controller layer.
• Updating the HTML template to add a delete button for each ToDo item.

Congratulations on completing this final lesson of the course! You now have a fully featured ToDo app built with Flask, including the ability to create, update, and delete ToDo items. Don't forget to head over to the practice exercises to reinforce what you've learned and put the delete functionality to the test.

Great work, and keep building and improving your Flask applications!