Guard against invalid removeChild (#1707)

* Guard against invalid removeChild

* Add proper assertions to defensive DOM removal tests

- Add expect.assertions(2) to ensure tests verify expected behavior
- Add assertion that tether.enabled is true after enable()
- Wrap destroy() calls in expect().not.toThrow() for proper error handling
- Fix whitespace and formatting for consistency

Author: RobbieTheWagner

src/js/tether.js

@@ -683,7 +683,7 @@ class TetherClass extends Evented {
 
       if (getOffsetParent(this.element) !== offsetParent) {
         defer(() => {
-          this.element.parentNode.removeChild(this.element);
+          this.element?.parentNode?.removeChild(this.element);
           offsetParent.appendChild(this.element);
         });
       }
@@ -719,7 +719,7 @@ class TetherClass extends Evented {
         }
 
         if (!offsetParentIsBody) {
-          this.element.parentNode.removeChild(this.element);
+          this.element?.parentNode?.removeChild(this.element);
           this.element.ownerDocument.body.appendChild(this.element);
         }
       }
@@ -794,10 +794,18 @@ Tether.modules.push({
   },
 
   destroy() {
-    ['target', 'element'].forEach((type => {
+    ['target', 'element'].forEach((type) => {
+      if (!this.markers || !this.markers[type]) {
+        return;
+      }
       const el = this.markers[type].el;
-      this[type].removeChild(el);
-    }))
+      try {
+        el?.parentNode?.removeChild(el);
+      } catch (e) {
+        // Marker elements may have already been removed if the parent was removed from DOM
+        // This is expected behavior in dynamic applications
+      }
+    });
   },
 
   position({ manualOffset, manualTargetOffset }) {

src/js/utils/bounds.js

@@ -143,7 +143,7 @@ export function getVisibleBounds(body, target) {
 }
 
 export function removeUtilElements(body) {
-  if (zeroElement) {
+  if (zeroElement && zeroElement?.parentNode === body) {
     body.removeChild(zeroElement);
   }
   zeroElement = null;

test/unit/tether.spec.js

@@ -159,4 +159,123 @@ describe('Tether', () => {
       expect(target.classList.length, 'target - destroy sets classes back to initial state').toEqual(1);
     });
   });
+
+  describe('defensive DOM removal', () => {
+    it('should handle destroy when target is removed from DOM', () => {
+      expect.assertions(2);
+
+      const tether = new Tether({
+        element: '.element',
+        target: '.target',
+        attachment: 'top left',
+        targetAttachment: 'top right'
+      });
+
+      tether.enable();
+
+      // Verify tether is enabled
+      expect(tether.enabled).toBe(true);
+
+      // Disable first to prevent any positioning attempts
+      tether.disable();
+
+      // Remove target from DOM before destroying tether
+      document.body.removeChild(target);
+
+      // This should not throw an error
+      expect(() => {
+        tether.destroy();
+      }).not.toThrow();
+
+      // Clean up element - it might have been moved by tether
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+
+      // Put element back in body for afterEach
+      if (!element.parentNode) {
+        document.body.appendChild(element);
+      }
+
+      // Reset target to a new one for afterEach
+      target = document.createElement('div');
+      target.classList.add('target');
+      document.body.appendChild(target);
+    });
+
+    it('should handle destroy when element is removed from DOM', () => {
+      expect.assertions(2);
+
+      const tether = new Tether({
+        element: '.element',
+        target: '.target',
+        attachment: 'top left',
+        targetAttachment: 'top right'
+      });
+
+      tether.enable();
+
+      // Verify tether is enabled
+      expect(tether.enabled).toBe(true);
+
+      // Disable first to prevent any positioning attempts
+      tether.disable();
+
+      // Remove element from DOM before destroying tether
+      const currentParent = element.parentNode;
+      if (currentParent) {
+        currentParent.removeChild(element);
+      }
+
+      // This should not throw an error
+      expect(() => {
+        tether.destroy();
+      }).not.toThrow();
+
+      // Reset element for afterEach
+      element = document.createElement('div');
+      element.classList.add('element');
+      document.body.appendChild(element);
+    });
+
+    it('should handle destroy when both element and target are removed from DOM', () => {
+      expect.assertions(2);
+
+      const tether = new Tether({
+        element: '.element',
+        target: '.target',
+        attachment: 'top left',
+        targetAttachment: 'top right'
+      });
+
+      tether.enable();
+
+      // Verify tether is enabled
+      expect(tether.enabled).toBe(true);
+
+      // Disable first to prevent any positioning attempts
+      tether.disable();
+
+      // Remove both from DOM before destroying tether
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      if (target.parentNode) {
+        target.parentNode.removeChild(target);
+      }
+
+      // This should not throw an error
+      expect(() => {
+        tether.destroy();
+      }).not.toThrow();
+
+      // Reset for afterEach
+      element = document.createElement('div');
+      element.classList.add('element');
+      document.body.appendChild(element);
+      target = document.createElement('div');
+      target.classList.add('target');
+      document.body.appendChild(target);
+    });
+  });
 });