Gekaufte Produkte entfernen

Jetzt merkt sich die Liste alles, auch was du letzte Woche gekauft hast. Nach dem Einkauf willst du wegräumen, was abgehakt ist, also bekommt die App dafür einen Button: Gekaufte Produkte entfernen.

Der Button gehört auf die Seite, also änderst du diesmal auch die index.html, und zwar um eine Zeile. Das Skript findet den Button dann wie die anderen Elemente mit document.querySelector().

Wie wirst du die gekauften Produkte los? Mit filter() aus der Lektion über Array-Methoden. Es geht das Array durch und macht ein neues, nur mit den Elementen, für die seine Funktion true zurückgibt. Hier willst du die Produkte behalten, die nicht gekauft sind:

produkte = produkte.filter((produkt) => !produkt.gekauft);

filter() ändert das alte Array nicht. Es gibt ein neues zurück, und der Code legt es in produkte, darum ist es gut, dass produkte ein let ist. Die Liste hat sich geändert, also tut der Handler dann, was die anderen Handler nach einer Änderung tun: Er speichert die Liste und zeigt sie an.

Ein typischer Fehler ist, produkte.filter(...) in einer eigenen Zeile ohne produkte = zu schreiben. Das neue Array wird erstellt und sofort vergessen, und die Liste bleibt, wie sie war.