Update

javascript/homeworkPage.js

@@ -61,6 +61,7 @@ class HomeworkPage extends HomeworkElement {
         this.sourceLanguage.setAttribute("id", sourceLanguageTextId)
         this.targetLanguage.setAttribute("id", targetLanguageTextId)
         this.content = this.querySelector('#content')
+        this.content.addEventListener("delete", this.deleteTask.bind(this))
         this.newButton = this.querySelector('#new')
         this.newButton.addEventListener("click", this.newVocabulary.bind(this))
         this.saveButton = this.querySelector('#save')
@@ -72,14 +73,14 @@ class HomeworkPage extends HomeworkElement {
     connectedCallback() {
       console.log("Page of type " + this.type + " added to session")
       if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
-        const row = new HomeworkVocabularyTask()
+        const row = new HomeworkVocabularyTask(crypto.randomUUID())
         this.content.append(row)
       }
     }
 
     newVocabulary() {
       if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
-        const row = new HomeworkVocabularyTask()
+        const row = new HomeworkVocabularyTask(crypto.randomUUID())
         this.content.append(row)
       }
     }
@@ -91,5 +92,18 @@ class HomeworkPage extends HomeworkElement {
     trainVocabulary() {
       console.log("Train!!")
     }
+
+    deleteTask(event) {
+      const tasks = this.content.querySelectorAll("homework-vocabulary-task")
+      if(tasks.length > 1) {
+        tasks.forEach((task) => {
+          if(event.detail.id == task.getId()) {
+            alert(task.getId())
+            task.remove()
+          }
+        })
+      }
+
+    }
 }
 customElements.define('homework-page', HomeworkPage)

javascript/homeworkVocabularyTask.js

@@ -1,5 +1,5 @@
 class HomeworkVocabularyTask extends HomeworkElement {
-	constructor () {
+	constructor (id) {
     super()
     this.innerHTML =
     `
@@ -9,6 +9,7 @@ class HomeworkVocabularyTask extends HomeworkElement {
       <img src="/images/check-circle.svg" class="disabled">
       <img src="/images/times-circle.svg" class="disabled">
     `
+    this.id = id
     this.setAttribute("result", "unknown")
     this.setAttribute("state", "edit")
     this.deleteButton = this.querySelector('img#delete')
@@ -21,6 +22,11 @@ class HomeworkVocabularyTask extends HomeworkElement {
 
   deleteTask() {
     console.log("Delete line")
+    this.dispatchEvent(new CustomEvent("delete", {detail:{id: this.id}, bubbles: true, cancelable: true}))
+  }
+
+  getId() {
+    return this.id
   }
 }
 customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)