add solution

vue-project/src/components/InputMask.vue

@@ -16,7 +16,8 @@
       </label>
       <button type="submit">Note Eintragen</button>
     </form>
-    <List :grades="grades"/>
+    <!-- @deleteEntry="deleteGrade"-->
+    <List :grades="grades" @deleteGrade="deleteGrade"/>
   </div>
 </template>
 
@@ -57,6 +58,10 @@ function validateInput() {
   const valid_grade = grade_steps.includes(parseFloat(grade_form_input.value.note));
   return valid_grade && not_empty ? true : false;
 }
+
+function deleteGrade(id) {
+  grades.value = grades.value.filter(e => e.id !== id)
+}
 </script>
 
 <style scoped>

vue-project/src/components/List.vue

@@ -11,7 +11,7 @@
       </tr>
       </thead>
       <tbody>
-      <ListItem v-for="(entry, index) in props.grades" :kuerzel="entry.kuerzel"
+      <ListItem @deleteEntry="emitAgain" v-for="(entry, index) in props.grades" :kuerzel="entry.kuerzel"
                 :credits="entry.credits"
                 :note="entry.note" :id="entry.id"/>
       </tbody>
@@ -23,7 +23,11 @@
 import ListItem from './ListItem.vue';
 
 const props = defineProps(['grades'])
+const emit = defineEmits(['deleteGrade'])
 
+function emitAgain(id) {
+  emit("deleteGrade", id)
+}
 </script>
 
 <style lang="css">

vue-project/src/components/ListItem.vue

@@ -1,9 +1,12 @@
 <template>
-  <tr>
+  <tr :style="{ backgroundColor: backgroundColor }">
     <td>{{ kuerzel }}</td>
     <td>{{ note }}</td>
     <td>{{ credits }}</td>
     <td>{{ id }}</td>
+    <td>
+      <button @click="emitData">Löschen</button>
+    </td>
   </tr>
 
 </template>
@@ -17,6 +20,12 @@ const props = defineProps({
   id: null
 })
 
+const emit = defineEmits(['deleteEntry'])
+
+function emitData() {
+  emit("deleteEntry", props.id)
+}
+
 </script>
 
 <style></style>