Teil 20: Aufgaben löschen – mit einem Klick im Browser

---

🎯 Ziel dieses Teils

✅ Jede Aufgabe bekommt einen Löschen-Button
✅ Klick auf den Button → Aufgabe wird gelöscht
✅ Änderungen werden gespeichert
✅ Liste aktualisiert sich im Browser

---

Was du brauchst

• Neue Route: /loeschen/<nummer>
• Button „❌ Löschen“ in der HTML-Datei
• Aufgabe aus der Liste entfernen
• Danach: speichern + zurück zur Startseite

---

Schritt 1: Neue Route in app.py

Füge in deiner app.py folgende Funktion hinzu:

@app.route("/loeschen/<int:index>")
def aufgabe_loeschen(index):
    if 0 <= index < len(aufgaben):
        aufgaben.pop(index)
        aufgaben_speichern()
    return redirect(url_for("startseite"))

🔍 Erklärung:

Code	Wirkung
aufgaben.pop(index)	Entfernt die Aufgabe an Position index
aufgaben_speichern()	Speichert neue Liste
redirect(...)	Leitet zurück zur Startseite

---

Schritt 2: Löschen-Button im HTML (index.html)

In der Schleife fügst du unter jede Aufgabe zusätzlich den „Löschen“-Button ein.

Du kannst beide Buttons nebeneinander anzeigen – z. B. so:

<ul>
    {% for aufgabe in aufgaben %}
        <li>
            {% if aufgabe.erledigt %}
                ✅ <s>{{ aufgabe.text }}</s>
            {% else %}
                ⬜ {{ aufgabe.text }}
            {% endif %}

            <!-- Button-Gruppe -->
            <a href="/erledigt/{{ loop.index0 }}">
                <button>✅ Erledigt</button>
            </a>
            <a href="/loeschen/{{ loop.index0 }}">
                <button>❌ Löschen</button>
            </a>
        </li>
    {% endfor %}
</ul>

Du kannst die „Erledigt“-Buttons auch nur bei offenen Aufgaben zeigen, wenn du willst – das ist Geschmackssache.

---

Schritt 3: App starten & testen

python app.py

Dann öffne http://127.0.0.1:5000

✅ Neue Aufgaben hinzufügen
✅ Aufgaben abhaken
✅ Aufgaben löschen
Alles geht jetzt im Browser – mit einem Klick.

---

Was du jetzt kannst

Funktion	Wie gemacht?
Aufgabe löschen	.pop(index)
Per Button aufrufen	/loeschen/<index>
Zurück zur Startseite	redirect(url_for(...))
Dauerhaft speichern	aufgaben_speichern()

---

Was du gelernt hast

Konzept	Erklärung
Zwei Buttons pro Eintrag	Aktionen klar trennen
Routen mit Variablen	<int:index> als Platzhalter
pop(index)	Eintrag aus Liste löschen

---

Bonus-Ideen

• Bestätigung vorm Löschen (JavaScript alert)
• „Papierkorb“-Modus statt direkt löschen
• Filter: Zeige nur offene oder erledigte Aufgaben