Add remove warning

src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js

@@ -118,7 +118,7 @@ Use this directive to render a ui component for selecting child items to a paren
 (function() {
     'use strict';
 
-    function ChildSelectorDirective() {
+    function ChildSelectorDirective(overlayService, localizationService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -126,10 +126,30 @@ Use this directive to render a ui component for selecting child items to a paren
             scope.dialogModel = {};
             scope.showDialog = false;
 
-            scope.removeChild = (selectedChild, $index) => {
-               if (scope.onRemove) {
-                  scope.onRemove(selectedChild, $index);
-               }
+            scope.removeChild = (selectedChild, $index, event) => {
+               const dialog = {
+                    view: "views/components/overlays/umb-template-remove-confirm.html",
+                    layout: selectedChild,
+                    submitButtonLabelKey: "defaultdialogs_yesRemove",
+                    submitButtonStyle: "danger",
+                    submit: function () {
+                        if(scope.onRemove) {
+                            scope.onRemove(selectedChild, $index);
+                            overlayService.close();
+                        }
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                localizationService.localize("general_delete").then(value => {
+                    dialog.title = value;
+                    overlayService.open(dialog);
+                });
+
+                event.preventDefault();
+                event.stopPropagation();
             };
 
             scope.addChild = $event => {

src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-template-remove-confirm.html

@@ -0,0 +1,15 @@
+<div>
+
+    <div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
+        <localize key="contentTypeEditor_removeChildNode">You are removing the child node</localize> <strong>{{model.layout.name}}</strong>.
+    </div>
+
+    <p>
+        <localize key="contentTypeEditor_removeChildNodeWarning">
+            Removing a child node will limit the editors options to create different content types beneath a node.
+        </localize>
+    </p>
+
+    <localize key="defaultdialogs_confirmdelete">Are you sure you want to remove</localize>?
+
+</div>

src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html

@@ -24,7 +24,7 @@
                 <span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
             </div>
             <div class="umb-child-selector__child-actions">
-                <button type="button" class="umb-node-preview__action umb-node-preview__action--red umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
+                <button type="button" class="umb-node-preview__action umb-node-preview__action--red umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index, $event)">
                     <localize key="general_remove">Remove</localize>
                 </button>
             </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js

@@ -188,7 +188,6 @@ angular.module("umbraco")
             }
 
             function deleteLayout(layout, index, event) {
-
                 const dialog = {
                     view: "views/propertyEditors/grid/overlays/rowdeleteconfirm.html",
                     layout: layout,