diff --git a/src/commands/view/ComponentDelete.js b/src/commands/view/ComponentDelete.js
index f8fba0d4f..b9591728b 100644
--- a/src/commands/view/ComponentDelete.js
+++ b/src/commands/view/ComponentDelete.js
@@ -2,6 +2,7 @@ import { isArray } from 'underscore';
 
 export default {
   run(ed, sender, opts = {}) {
+    const toSelect = [];
     let components = opts.component || ed.getSelectedAll();
     components = isArray(components) ? [...components] : [components];
 
@@ -16,8 +17,11 @@ export default {
         });
       }
       component.remove();
+      component.collection && toSelect.push(component);
     });
 
+    toSelect.length && ed.select(toSelect);
+
     return components;
   }
 };
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index c5de94454..c95bfcb14 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -1470,8 +1470,15 @@ const Component = Backbone.Model.extend(Styleable).extend(
      * @return {this}
      */
     remove(opts = {}) {
+      const { em } = this;
       const coll = this.collection;
-      return coll && coll.remove(this, opts);
+      const remove = () => coll && coll.remove(this, opts);
+      const rmOpts = {};
+      [this, em].map(i =>
+        i.trigger('component:remove:before', this, remove, rmOpts)
+      );
+      !rmOpts.abort && remove();
+      return this;
     },
 
     /**