use <template> tag

This is semantically more sound than using a hidden div

1 files changed, 11 insertions, 10 deletions

diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts
index ae9e724..10c1490 100644
--- a/asset-sources/fietsboek.ts
+++ b/asset-sources/fietsboek.ts
@@ -179,7 +179,8 @@ function searchFriends() {
     fetch(FRIENDS_URL)
         .then((response) => response.json())
         .then((response: [JsonFriend]) => {
-            const blueprint = document.querySelector("#friendSearchBlueprint") as HTMLLIElement;
+            const blueprint = (document.querySelector("#friendSearchBlueprint") as HTMLTemplateElement).
+                content;
 
             // Only show friends with a matching name
             let friends = response.filter(
@@ -192,16 +193,15 @@ function searchFriends() {
             );
 
             friends.forEach((friend) => {
-                const copy = blueprint.cloneNode(true) as HTMLLIElement;
-                copy.removeAttribute("id");
+                const copy = blueprint.cloneNode(true) as DocumentFragment;
                 (copy.querySelector(".friend-name") as HTMLSpanElement).textContent = friend.name;
                 copy.querySelector("button")?.addEventListener("click", (event: MouseEvent) => {
                     const button = (event.target as HTMLElement).closest("button")!;
                     button.parentNode!.parentNode!.removeChild(button.parentNode!);
 
-                    const added = document.querySelector("#friendAddedBlueprint")!.
-                        cloneNode(true) as HTMLLIElement;
-                    added.removeAttribute("id");
+                    const added = (document.querySelector("#friendAddedBlueprint")! as HTMLTemplateElement).
+                        content.
+                        cloneNode(true) as DocumentFragment;
                     (added.querySelector(".friend-name") as HTMLSpanElement).
                         textContent = friend.name;
                     added.querySelector("input")!.value = friend.id.toString();
@@ -259,9 +259,9 @@ function imageSelectorChanged(event: Event) {
         transfer.items.add(file);
         input.files = transfer.files;
 
-        const preview = document.querySelector("#trackImagePreviewBlueprint")!.
-            cloneNode(true) as HTMLDivElement;
-        preview.removeAttribute("id");
+        const preview = (document.querySelector("#trackImagePreviewBlueprint") as HTMLTemplateElement).
+            content.
+            cloneNode(true) as DocumentFragment;
         preview.querySelector("img")!.src = URL.createObjectURL(file);
         preview.querySelector("button.delete-image")!.
             addEventListener("click", deleteImageButtonClicked as EventListener);
@@ -269,7 +269,7 @@ function imageSelectorChanged(event: Event) {
             addEventListener("click", editImageDescriptionClicked as EventListener);
         (preview.querySelector("input.image-description-input") as HTMLInputElement).
             name = `image-description[${window.fietsboekImageIndex}]`;
-        preview.appendChild(input);
+        preview.querySelector("div")!.appendChild(input);
 
         document.querySelector("#trackImageList")!.appendChild(preview);
     }
@@ -286,6 +286,7 @@ addHandler("#imageSelector", "change", imageSelectorChanged);
  */
 function deleteImageButtonClicked(event: MouseEvent) {
     const preview = (event.target as HTMLElement).closest("div.track-image-preview")!;
+    console.log(preview);
     /* If this was a image yet to be uploaded, simply remove it */
     const input = preview.querySelector("input[type=file]");
     if (input) {