Clear wrapper on frame remove

src/canvas/model/Frame.js

@@ -48,6 +48,10 @@ export default Model.extend({
     !props.height && this.set(keyAutoH, 1);
   },
 
+  onRemove() {
+    this.getComponent().remove({ root: 1 });
+  },
+
   changesUp: debounce(function(opt = {}) {
     if (opt.temporary || opt.noCount || opt.avoidStore) {
       return;

src/canvas/model/Frames.js

@@ -8,6 +8,17 @@ export default Collection.extend({
   initialize(models, config = {}) {
     bindAll(this, 'itemLoaded');
     this.config = config;
+    this.on('reset', this.onReset);
+    this.on('remove', this.onRemove);
+  },
+
+  onReset(m, opts = {}) {
+    const prev = opts.previousModels || [];
+    prev.map(p => this.onRemove(p));
+  },
+
+  onRemove(removed) {
+    removed && removed.onRemove();
   },
 
   itemLoaded() {

src/dom_components/model/Component.js

@@ -1576,7 +1576,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
     remove(opts = {}) {
       const { em } = this;
       const coll = this.collection;
-      const remove = () => coll && coll.remove(this, opts);
+      const remove = () => {
+        coll && coll.remove(this, opts);
+        opts.root && this.components('');
+      };
       const rmOpts = { ...opts };
       [this, em].map(i =>
         i.trigger('component:remove:before', this, remove, rmOpts)

src/pages/model/Page.js

@@ -17,6 +17,10 @@ export default Model.extend({
     um && um.add(frames);
   },
 
+  onRemove() {
+    this.get('frames').reset();
+  },
+
   getFrames() {
     return this.get('frames');
   },

src/pages/model/Pages.js

@@ -6,6 +6,17 @@ export default Collection.extend({
 
   initialize(models, config = {}) {
     this.config = config;
+    this.on('reset', this.onReset);
+    this.on('remove', this.onRemove);
+  },
+
+  onReset(m, opts = {}) {
+    const prev = opts.previousModels || [];
+    prev.map(p => this.onRemove(p));
+  },
+
+  onRemove(removed) {
+    removed && removed.onRemove();
   },
 
   add(m, o = {}) {