如何高效检测指定DOM元素被移除并触发回调？

我完全理解你的需求——想要一个像element.onRemove()这样简洁的API，只在指定元素从DOM中移除时触发一次回调，同时还要避免不必要的性能开销。下面是一个高效的实现方案，完美匹配你的需求：

核心实现代码 #

我们可以给Element原型扩展一个onRemove方法，底层用MutationObserver但做了针对性的性能优化：

Element.prototype.onRemove = function(callback) {
  // 先检查元素是否已经不在DOM中，直接异步触发回调
  if (!document.contains(this)) {
    queueMicrotask(callback);
    return;
  }

  const parent = this.parentNode;
  // 没有父元素意味着元素不在DOM树里
  if (!parent) {
    queueMicrotask(callback);
    return;
  }

  const observer = new MutationObserver((mutations) => {
    // 遍历mutation记录，检查当前元素是否被移除
    for (const mutation of mutations) {
      if (mutation.removedNodes.contains(this)) {
        callback();
        observer.disconnect(); // 触发后立刻停止监听，避免冗余开销
        return;
      }
    }

    // 额外处理父元素被整体移除的情况
    if (!document.contains(this)) {
      callback();
      observer.disconnect();
    }
  });

  // 只监听父元素的子节点变化，范围极小，性能开销可以忽略
  observer.observe(parent, { childList: true });
};

如何使用 #

完全符合你想要的调用方式：

const element = document.getElementById("victim");
element.onRemove(() => releaseKraken(element));

方案优势 #

• 极致轻量化：只监听目标元素的直接父元素，而非整个document或上层容器，回调触发后立刻断开观察者，不会产生持续的性能消耗。
• 覆盖所有移除场景：既处理元素被直接从父元素移除的情况，也处理父元素被整体移除导致元素脱离DOM的场景。
• 异步兼容：使用queueMicrotask保证回调异步执行，符合浏览器事件循环的预期，避免同步执行带来的潜在问题。
• 简洁API：完全实现了你想要的element.onRemove()调用方式，无需额外的复杂配置。

额外说明 #

• 如果元素已经不在DOM中，调用onRemove会立刻异步触发回调。
• 每次调用onRemove都会绑定一个独立的监听，你可以多次调用绑定多个回调，或者在回调内部做标记实现只触发一次的逻辑。
• 元素在DOM树内移动（比如从一个父节点移到另一个父节点）不会触发回调，因为元素始终在DOM中，符合你“从DOM中被移除”的核心需求。

内容的提问来源于stack exchange，提问作者Andrey Mikhaylov - lolmaus