diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 04e86afb268..52200ce7847 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -129,7 +129,7 @@ export const commitActionForFile = file => {
 
 export const getCommitFiles = stagedFiles =>
   stagedFiles.reduce((acc, file) => {
-    if (file.moved) return acc;
+    if (file.moved || file.type === 'tree') return acc;
 
     return acc.concat({
       ...file,
diff --git a/changelogs/unreleased/64677-delete-directory-webide.yml b/changelogs/unreleased/64677-delete-directory-webide.yml
new file mode 100644
index 00000000000..27d596b6b19
--- /dev/null
+++ b/changelogs/unreleased/64677-delete-directory-webide.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed removing directories in Web IDE
+merge_request: 31727
+author:
+type: fixed
diff --git a/spec/javascripts/ide/stores/utils_spec.js b/spec/javascripts/ide/stores/utils_spec.js
index bceb3a8db91..0fc9519a6bf 100644
--- a/spec/javascripts/ide/stores/utils_spec.js
+++ b/spec/javascripts/ide/stores/utils_spec.js
@@ -261,6 +261,41 @@ describe('Multi-file store utils', () => {
         },
       ]);
     });
+
+    it('filters out folders from the list', () => {
+      const files = [
+        {
+          path: 'a',
+          type: 'blob',
+          deleted: true,
+        },
+        {
+          path: 'c',
+          type: 'tree',
+          deleted: true,
+        },
+        {
+          path: 'c/d',
+          type: 'blob',
+          deleted: true,
+        },
+      ];
+
+      const flattendFiles = utils.getCommitFiles(files);
+
+      expect(flattendFiles).toEqual([
+        {
+          path: 'a',
+          type: 'blob',
+          deleted: true,
+        },
+        {
+          path: 'c/d',
+          type: 'blob',
+          deleted: true,
+        },
+      ]);
+    });
   });
 
   describe('mergeTrees', () => {