First tile correctly generated

target/classes/static/js/datatransfer.js

@@ -356,13 +356,26 @@ function selectMessage(id){
     console.log("Selected message selected");
 }
 
+const tileRemoval = function(){
+    $(this).closest('div.tile').remove();
+}
+
 // TODO: Modify html for tiles
 function generateMessageTileHtml(id, httpStatus, mediaType){
-    var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
-        '<table><tr><td>Id: '+ id +'</td></tr>' +
-        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">&times;</div>' +
-        '<div style="clear: both;"></div>';
+    var innerHTML = '' +
+    '<div class="tile">' +
+        '<div class="content">' +
+            '<div class="display-space-between">' +
+                '<div class="centered-vertically">' +
+                    '<p>Id: ' + id + '</p>' +
+                    '<p>Status: ' + httpStatus + '</p>' +
+                '</div>' +
+                '<div>' +
+                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     return innerHTML;
 }
 

target/classes/static/js/fiddle.js

@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);