diff --git a/frameworks/keyed/svelte/src/Main.svelte b/frameworks/keyed/svelte/src/Main.html
similarity index 85%
rename from frameworks/keyed/svelte/src/Main.svelte
rename to frameworks/keyed/svelte/src/Main.html
index 377cbc99e..1e74e7e87 100644
--- a/frameworks/keyed/svelte/src/Main.svelte
+++ b/frameworks/keyed/svelte/src/Main.html
@@ -30,14 +30,12 @@ <h1>Svelte (keyed)</h1>
   </div>
 </div>
 <table class="table table-hover table-striped test-data">
-  <tbody>
+  <tbody on:click={click}>
     {#each data as row, num (row.id)}
       <tr class={selected === row.id ? 'danger' : ''}>
         <td class="col-md-1">{row.id}</td>
-        <td class="col-md-4">
-          <a on:click={() => select(row.id)}>{row.label}</a>
-        </td>
-        <td class="col-md-1"><a on:click={() => remove(row.id)}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+        <td class="col-md-4"><a>{row.label}</a></td>
+        <td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
         <td class="col-md-6"></td>
       </tr>
     {/each}
@@ -60,8 +58,8 @@ <h1>Svelte (keyed)</h1>
         data[i].label += ' !!!';
       }
     },
-    remove = (num) => {
-      const idx = data.findIndex(d => d.id === num);
+    remove = id => {
+      const idx = data.findIndex(d => d.id === id);
       data = [...data.slice(0, idx), ...data.slice(idx + 1)];
     },
     run = () => {
@@ -72,11 +70,19 @@ <h1>Svelte (keyed)</h1>
       data = buildData(10000);
       selected = undefined;
     },
-    select = (id) => selected = id,
+    select = id => selected = id,
     swapRows = () => {
       if (data.length > 998) {
         data = [data[0], data[998], ...data.slice(2, 998), data[1], data[999]];
       }
+    },
+    click = ({ target }) => {
+      const id = Number.parseInt(target.closest("tr").firstChild.firstChild.nodeValue);
+      if (target.matches(".glyphicon-remove")) {
+        remove(id);
+      } else {
+        select(id);
+      }
     };
 
   function _random (max) { return Math.round(Math.random() * 1000) % max; };
diff --git a/frameworks/keyed/svelte/src/main.js b/frameworks/keyed/svelte/src/main.js
index 90a5b31cc..9e39ea923 100644
--- a/frameworks/keyed/svelte/src/main.js
+++ b/frameworks/keyed/svelte/src/main.js
@@ -1,4 +1,4 @@
-import Main from './Main.svelte';
+import Main from './Main.html';
 
 export default new Main({
   target: document.querySelector( '#main' )
diff --git a/frameworks/non-keyed/svelte/src/Main.svelte b/frameworks/non-keyed/svelte/src/Main.html
similarity index 85%
rename from frameworks/non-keyed/svelte/src/Main.svelte
rename to frameworks/non-keyed/svelte/src/Main.html
index eac6ae088..c4ed74a7b 100644
--- a/frameworks/non-keyed/svelte/src/Main.svelte
+++ b/frameworks/non-keyed/svelte/src/Main.html
@@ -30,14 +30,12 @@ <h1>Svelte (non-keyed)</h1>
 	</div>
 </div>
 <table class="table table-hover table-striped test-data">
-	<tbody>
+	<tbody on:click={click}>
 		{#each data as row, num}
       <tr class={selected === row.id ? 'danger' : ''}>
         <td class="col-md-1">{row.id}</td>
-        <td class="col-md-4">
-          <a on:click={() => select(row.id)}>{row.label}</a>
-        </td>
-        <td class="col-md-1"><a on:click={() => remove(row.id)}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
+        <td class="col-md-4"><a>{row.label}</a></td>
+        <td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
         <td class="col-md-6"></td>
       </tr>
 		{/each}
@@ -60,8 +58,8 @@ <h1>Svelte (non-keyed)</h1>
         data[i].label += ' !!!';
       }
     },
-    remove = (num) => {
-      const idx = data.findIndex(d => d.id === num);
+    remove = id => {
+      const idx = data.findIndex(d => d.id === id);
       data = [...data.slice(0, idx), ...data.slice(idx + 1)];
     },
     run = () => {
@@ -72,11 +70,19 @@ <h1>Svelte (non-keyed)</h1>
       data = buildData(10000);
       selected = undefined;
     },
-    select = (id) => selected = id,
+    select = id => selected = id,
     swapRows = () => {
       if (data.length > 998) {
         data = [data[0], data[998], ...data.slice(2, 998), data[1], data[999]];
       }
+    },
+    click = ({ target }) => {
+      const id = Number.parseInt(target.closest("tr").firstChild.firstChild.nodeValue);
+      if (target.matches(".glyphicon-remove")) {
+        remove(id);
+      } else {
+        select(id);
+      }
     };
 
   function _random (max) { return Math.round(Math.random() * 1000) % max; };
diff --git a/frameworks/non-keyed/svelte/src/main.js b/frameworks/non-keyed/svelte/src/main.js
index 90a5b31cc..9e39ea923 100644
--- a/frameworks/non-keyed/svelte/src/main.js
+++ b/frameworks/non-keyed/svelte/src/main.js
@@ -1,4 +1,4 @@
-import Main from './Main.svelte';
+import Main from './Main.html';
 
 export default new Main({
   target: document.querySelector( '#main' )