refactor: clean up removeChild usages (#23592)

Now that we don't have to support IE11 anymore, we can use `Element.remove` instead of `removeChild`.

Author: crisbeto

src/cdk-experimental/column-resize/resizable.ts

@@ -108,14 +108,8 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   ngOnDestroy(): void {
     this.destroyed.next();
     this.destroyed.complete();
-
-    if (this.inlineHandle) {
-      this.elementRef.nativeElement!.removeChild(this.inlineHandle);
-    }
-
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-    }
+    this.inlineHandle?.remove();
+    this.overlayRef?.dispose();
   }
 
   protected abstract getInlineHandleCssClassName(): string;

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -178,11 +178,8 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
   }
 
   ngOnDestroy(): void {
-    // TODO: Use remove() once we're off IE11.
-    if (this._styleElement && this._styleElement.parentNode) {
-      this._styleElement.parentNode.removeChild(this._styleElement);
-      this._styleElement = undefined;
-    }
+    this._styleElement?.remove();
+    this._styleElement = undefined;
   }
 
   private _getPropertyValue(cssFriendlyColumnName: string, key: string): string|undefined {

src/cdk-experimental/dialog/dialog.spec.ts

@@ -877,7 +877,7 @@ describe('Dialog', () => {
   describe('focus management', () => {
     // When testing focus, all of the elements must be in the DOM.
     beforeEach(() => document.body.appendChild(overlayContainerElement));
-    afterEach(() => document.body.removeChild(overlayContainerElement));
+    afterEach(() => overlayContainerElement.remove());
 
     it('should focus the first tabbable element of the dialog on open (the default)',
       fakeAsync(() => {
@@ -971,7 +971,7 @@ describe('Dialog', () => {
         .withContext('Expected that the trigger was refocused after the dialog is closed.')
         .toBe('dialog-trigger');
 
-      document.body.removeChild(button);
+      button.remove();
     }));
 
     it('should re-focus trigger element inside the shadow DOM when dialog closes', fakeAsync(() => {
@@ -1036,8 +1036,8 @@ describe('Dialog', () => {
       expect(document.activeElement!.id)
         .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
-      body.removeChild(button);
-      body.removeChild(otherButton);
+      button.remove();
+      otherButton.remove();
     }));
 
     it('should allow the consumer to shift focus in afterClosed', fakeAsync(() => {
@@ -1069,8 +1069,8 @@ describe('Dialog', () => {
         .withContext('Expected that the trigger was refocused after the dialog is closed.')
         .toBe('input-to-be-focused');
 
-      document.body.removeChild(button);
-      document.body.removeChild(input);
+      button.remove();
+      input.remove();
       flush();
     }));
 

src/cdk-experimental/listbox/listbox.ts

@@ -174,7 +174,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
   private _removeIcons(element: Element) {
     // TODO: make this a configurable function that can removed any desired type of node.
     for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
-      icon.parentNode?.removeChild(icon);
+      icon.remove();
     }
   }
 

src/cdk-experimental/menu/menu-item.ts

@@ -35,7 +35,7 @@ import {Toggler, MENU_AIM, MenuAim} from './menu-aim';
 /** Removes all icons from within the given element. */
 function removeIcons(element: Element) {
   for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
-    icon.parentNode?.removeChild(icon);
+    icon.remove();
   }
 }
 

src/cdk-experimental/table-scroll-container/table-scroll-container.ts

@@ -67,11 +67,8 @@ export class CdkTableScrollContainer implements StickyPositioningListener,
   }
 
   ngOnDestroy(): void {
-    // TODO: Use remove() once we're off IE11.
-    if (this._styleElement?.parentNode) {
-      this._styleElement.parentNode.removeChild(this._styleElement);
-      this._styleElement = undefined;
-    }
+    this._styleElement?.remove();
+    this._styleElement = undefined;
   }
 
   stickyColumnsUpdated({sizes}: StickyUpdate): void {

src/cdk/a11y/aria-describer/aria-describer.spec.ts

@@ -214,10 +214,7 @@ describe('AriaDescriber', () => {
 
     // Use `querySelectorAll` with an attribute since `getElementById` will stop at the first match.
     expect(document.querySelectorAll(`[id='${MESSAGES_CONTAINER_ID}']`).length).toBe(1);
-
-    if (extraContainer.parentNode) {
-      extraContainer.parentNode.removeChild(extraContainer);
-    }
+    extraContainer.remove();
   });
 
   it('should not describe messages that match up with the aria-label of the element', () => {

src/cdk/a11y/aria-describer/aria-describer.ts

@@ -156,10 +156,7 @@ export class AriaDescriber implements OnDestroy {
   /** Deletes the message element from the global messages container. */
   private _deleteMessageElement(key: string|Element) {
     const registeredMessage = messageRegistry.get(key);
-    const messageElement = registeredMessage && registeredMessage.messageElement;
-    if (messagesContainer && messageElement) {
-      messagesContainer.removeChild(messageElement);
-    }
+    registeredMessage?.messageElement?.remove();
     messageRegistry.delete(key);
   }
 
@@ -172,9 +169,7 @@ export class AriaDescriber implements OnDestroy {
       // already a container on the page, but we don't have a reference to it. Clear the
       // old container so we don't get duplicates. Doing this, instead of emptying the previous
       // container, should be slightly faster.
-      if (preExistingContainer && preExistingContainer.parentNode) {
-        preExistingContainer.parentNode.removeChild(preExistingContainer);
-      }
+      preExistingContainer?.remove();
 
       messagesContainer = this._document.createElement('div');
       messagesContainer.id = MESSAGES_CONTAINER_ID;
@@ -193,8 +188,8 @@ export class AriaDescriber implements OnDestroy {
 
   /** Deletes the global messages container. */
   private _deleteMessagesContainer() {
-    if (messagesContainer && messagesContainer.parentNode) {
-      messagesContainer.parentNode.removeChild(messagesContainer);
+    if (messagesContainer) {
+      messagesContainer.remove();
       messagesContainer = null;
     }
   }

src/cdk/a11y/aria-describer/aria-reference.spec.ts

@@ -9,7 +9,7 @@ describe('AriaReference', () => {
   });
 
   afterEach(() => {
-    document.body.removeChild(testElement!);
+    testElement?.remove();
   });
 
   it('should be able to append/remove aria reference IDs', () => {

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -76,18 +76,12 @@ export class FocusTrap {
 
     if (startAnchor) {
       startAnchor.removeEventListener('focus', this.startAnchorListener);
-
-      if (startAnchor.parentNode) {
-        startAnchor.parentNode.removeChild(startAnchor);
-      }
+      startAnchor.remove();
     }
 
     if (endAnchor) {
       endAnchor.removeEventListener('focus', this.endAnchorListener);
-
-      if (endAnchor.parentNode) {
-        endAnchor.parentNode.removeChild(endAnchor);
-      }
+      endAnchor.remove();
     }
 
     this._startAnchor = this._endAnchor = null;