diff --git a/app/assets/javascripts/exercises.js.erb b/app/assets/javascripts/exercises.js.erb
index 5d202d64..bca0c8b0 100644
--- a/app/assets/javascripts/exercises.js.erb
+++ b/app/assets/javascripts/exercises.js.erb
@@ -76,6 +76,40 @@ $(function() {
     initializeEditor(latestTextAreaIndex, $('#files .editor').last()[0]);
   };
 
+  var removeFileForm = function(fileUrl) {
+    // validate fileUrl
+    var matches = fileUrl.match(/files\/(\d+)/);
+    if (matches) {
+      // select the file form based on the delete button
+      var fileForm = $('*[data-file-url="' + fileUrl + '"]').parent().parent().parent();
+      fileForm.remove();
+
+      // now remove the hidden input representing the file
+      var fileId = matches[1];
+      var input = $('input[type="hidden"][value="' + fileId + '"]')
+      input.remove()
+    }
+  }
+
+  var deleteFile = function(event) {
+    event.preventDefault();
+    var fileUrl = $(this).data('file-url');
+
+    if (confirm('<%= I18n.t('shared.confirm_destroy') %>')) {
+      var jqxhr = $.ajax({
+        // normal file path (without json) would destroy the context object (the exercise) as well, due to redirection
+        // to the context after the :destroy action.
+        contentType: 'Application/json',
+        url: fileUrl + '.json',
+        method: 'DELETE'
+      });
+      jqxhr.done(function () {
+        removeFileForm(fileUrl)
+      });
+      jqxhr.fail(ajaxError);
+    }
+  }
+
   var ajaxError = function() {
     $.flash.danger({
       text: $('#flash').data('message-failure')
@@ -121,6 +155,7 @@ $(function() {
     $('form.edit_exercise, form.new_exercise').on('submit', function() {
       $('#dummies').html('');
     });
+    $('.delete-file').on('click', deleteFile);
   };
 
   var findFileTypeByFileExtension = function(file_extension) {
diff --git a/app/views/exercises/_file_form.html.slim b/app/views/exercises/_file_form.html.slim
index 75deeeb5..57f43d43 100644
--- a/app/views/exercises/_file_form.html.slim
+++ b/app/views/exercises/_file_form.html.slim
@@ -7,7 +7,9 @@ li.panel.panel-default
         span = f.object.name
   .panel-collapse.collapse class=('in' if f.object.name.nil?) id="collapse#{id}" role="tabpanel"
     .panel-body
-      .clearfix = link_to(t('shared.destroy'), '#', class:'btn btn-warning btn-sm discard-file pull-right')
+      - if policy(f.object).destroy?
+        .clearfix
+          .btn.btn-warning.btn-sm.pull-right.delete-file data-file-url=code_ocean_file_path(id) = t('shared.destroy')
       .form-group
         = f.label(:name, t('activerecord.attributes.file.name'))
         = f.text_field(:name, class: 'form-control')
@@ -37,4 +39,4 @@ li.panel.panel-default
         .form-group
           = f.label(:role, t('activerecord.attributes.file.weight'))
           = f.number_field(:weight, class: 'form-control', min: 1, step: 'any')
-      = render('code_field', attribute: :content, form: f, label: t('activerecord.attributes.file.content'))
\ No newline at end of file
+      = render('code_field', attribute: :content, form: f, label: t('activerecord.attributes.file.content'))