diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
index fc629f974a..fccba47c0a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
@@ -34,7 +34,7 @@ angular.module("umbraco.directives")
            '</div>';
          }
          template += '<ul>' +
-                  '<umb-tree-item ng-repeat="child in tree.root.children" node="child" callback="callback" section="{{section}}"></umb-tree-item>' +
+                  '<umb-tree-item ng-repeat="child in tree.root.children" node="child" callback="callback" section="{{section}}" ng-animate="{leave: \'tree-node-delete-leave\'}"></umb-tree-item>' +
                   '</ul>' +
                 '</li>' +
                '</ul>';
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
index 61109c5da3..ca0e5d31a0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
@@ -32,7 +32,7 @@ angular.module("umbraco.directives")
 
     template: '<li><div ng-style="setTreePadding(node)" ng-class="{\'loading\': node.loading}">' +
         '<ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>' +        
-        '<ins ng-show="node.hasChildren" ng-class="{\'icon-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded}" ng-click="load(this, node)"></ins>' +
+        '<ins ng-show="node.hasChildren" ng-class="{\'icon-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded, \'node-deleting\': node.isDeleting}" ng-click="load(this, node)"></ins>' +
         '<i class="{{node | umbTreeIconClass:\'icon umb-tree-icon sprTree\'}}" style="{{node | umbTreeIconStyle}}"></i>' +
         '<a ng-click="select(this, node, $event)" >{{node.name}}</a>' +
         '<i class="umb-options" ng-click="options(this, node, $event)"><i></i><i></i><i></i></i>' +
@@ -127,8 +127,8 @@ angular.module("umbraco.directives")
         scope.setTreePadding = function(node) {
           return { 'padding-left': (node.level * 20) + "px" };
         };
-
-        var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}"></umb-tree-item></ul>';
+        
+        var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}" ng-animate="{leave: \'tree-node-delete-leave\'}"></umb-tree-item></ul>';
         var newElement = angular.element(template);
         $compile(newElement)(scope);
         element.append(newElement);
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
index 2b727b6f43..c13c9c980a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
@@ -12,4 +12,4 @@ function treeIconClassFilter(iconHelper) {
         return standardClasses + " icon-custom-file";
     };
 }
-angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);
\ No newline at end of file
+angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
index 99083e6cd5..e7ecf60a97 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
@@ -26,7 +26,11 @@ function treeService($q, treeResource, iconHelper) {
     return {
         
         removeNode: function(treeNode) {
-            var asdf = treeNode;
+            if (treeNode.parent == null) {
+                throw "Cannot remove a node that doesn't have a parent";
+            }
+            //remove the current item from it's siblings
+            treeNode.parent.children.splice(treeNode.parent.children.indexOf(treeNode), 1);
         },
 
         getTree: function (options) {
diff --git a/src/Umbraco.Web.UI.Client/src/less/animations.less b/src/Umbraco.Web.UI.Client/src/less/animations.less
index 1dcd9a63eb..9966ae0081 100644
--- a/src/Umbraco.Web.UI.Client/src/less/animations.less
+++ b/src/Umbraco.Web.UI.Client/src/less/animations.less
@@ -41,4 +41,92 @@
 
 .slide-show.slide-show-active {
 	margin-left: 0;
-}
\ No newline at end of file
+}
+ 
+.tree-node-delete-leave { 
+    -webkit-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+    -moz-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+    -o-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+    animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
+    display: block;
+    position: relative;    
+} 
+@-webkit-keyframes leave {
+    to {
+        opacity: 0;
+        height: 0px;
+        bottom: -70px;
+    }
+    25% {
+        bottom: 15px;
+    }
+    from {
+        opacity: 1;
+        height: 30px;
+        bottom: 0px;
+    }
+}
+@-moz-keyframes leave {
+    to {
+        opacity: 0;
+        height: 0px;
+        bottom: -70px;
+    }
+    25% {
+        bottom: 15px;
+    }
+    from {
+        opacity: 1;
+        height: 30px;
+        bottom: 0px;
+    }
+}
+@-ms-keyframes leave {
+    to {
+        opacity: 0;
+        height: 0px;
+        bottom: -70px;
+    }
+    25% {
+        bottom: 15px;
+    }
+    from {
+        opacity: 1;
+        height: 30px;
+        bottom: 0px;
+    }
+}
+@-o-keyframes leave {
+    to {
+        opacity: 0;
+        height: 0px;
+        bottom: -70px;
+    }
+    25% {
+        bottom: 15px;
+    }
+    from {
+        opacity: 1;
+        height: 30px;
+        bottom: 0px;
+    }
+}
+@keyframes leave {
+    to {
+        opacity: 0;
+        height: 0px;
+        bottom: -70px;
+    }
+    25% {
+        bottom: 15px;
+    }
+    from {
+        opacity: 1;
+        height: 30px;
+        bottom: 0px;
+    }
+}
+
+.tree-node-delete-leave * { 
+    color:@red !important;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less
index f18e33637a..23201b8b11 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tree.less
@@ -128,6 +128,10 @@ li.root > div > i.umb-options {
     top: 10px;
 }
 
+.umb-tree li.node-deleting *{
+    color: @red;
+}
+
 .hide-options .umb-options{display: none !important}
 .hide-header h5{display: none !important}
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js
index cd6fb62219..4719c75c4a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js
@@ -6,16 +6,19 @@
  * @description
  * The controller for deleting content
  */
-function LegacyDeleteController($scope, legacyResource) {
+function LegacyDeleteController($scope, legacyResource, treeService) {
 
     $scope.performDelete = function() {
 
-        legacyResource.deleteItem({
+        //mark it for deletion (used in the UI)
+        $scope.currentNode.isDeleting = true;
+
+        legacyResource.deleteItem({            
             nodeId: $scope.currentNode.id,
             nodeType: $scope.currentNode.nodetype
         }).then(function () {
             //TODO: Need to sync tree, etc...
-            alert("Deleted!");
+            treeService.removeNode($scope.currentNode);
             $scope.hideMenu();            
         });
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js
index 1e274d3a1c..4edd23aeb4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js
@@ -10,9 +10,11 @@ function ContentDeleteController($scope, contentResource, treeService) {
 
     $scope.performDelete = function() {
 
+        //mark it for deletion (used in the UI)
+        $scope.currentNode.isDeleting = true;
+
         contentResource.deleteById($scope.currentNode.id).then(function () {
             //TODO: Need to sync tree, etc...
-            alert("Deleted!");
             treeService.removeNode($scope.currentNode);
             $scope.hideMenu();            
         });