diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index 76952093..84c70a4a 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -92,6 +92,7 @@
   import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
   import {setUserBlockType} from '@/helpers/content-block';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+  import {insertAtIndex, removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
 
   export default Vue.extend({
     props: {
@@ -118,15 +119,7 @@
         title: '',
         isAssignment: false,
       contents: [
-        {
-          id: 23,
-          type: 'content_list_item',
-          contents: [
-            {
-              id: 2,
-            }
-          ]
-        }
+        {}
       ]},
     }),
 
@@ -186,23 +179,26 @@
       },
       remove(outer, inner) {
         if (inner === undefined) {
-          this.contentBlock.contents = [
-            ...this.contentBlock.contents.slice(0, outer),
-            ...this.contentBlock.contents.slice(outer + 1)
-          ];
+          // not a list item container, just remove the element from the outer array
+          this.contentBlock.contents = removeAtIndex(this.contentBlock.contents, outer);
         } else {
-          this.contentBlock.contents = [
-            ...this.contentBlock.contents.slice(0, outer),
-            {
-              ...this.contentBlock.contents[outer],
-              contents: [
-                ...this.contentBlock.contents[outer].contents.slice(0, inner),
-                ...this.contentBlock.contents[outer].contents.slice(inner+1),
-              ]
-            },
-            ...this.contentBlock.contents.slice(outer + 1)
-          ];
+          let prevInnerContents = this.contentBlock.contents[outer].contents;
+          let innerContents = removeAtIndex(prevInnerContents, inner);
 
+          if (innerContents.length) {
+            /*
+              there is still an element inside the outer element after removal,
+              so we replace the previous element in the outer array with the new one with fewer contents
+             */
+            let element = {
+              ...this.contentBlock.contents[outer],
+              contents: innerContents
+            };
+            this.contentBlock.contents = replaceAtIndex(this.contentBlock.contents, outer, element);
+          } else {
+            // inner contents is now empty, remove the whole element from the outer array
+            this.contentBlock.contents = removeAtIndex(this.contentBlock.contents, outer);
+          }
         }
       },
       save({title, contents, isAssignment}) {
@@ -238,6 +234,7 @@
         }).then(this.goToModule);
       },
       goToModule() {
+        // use the history, so the scroll position is preserved
         this.$router.go(-1);
       }
     },