如何监听HTML元素的移除，判断元素何时不存在？

嗨，我来帮你搞定这个问题！你提到在ReactJS里想监听元素移除、判断它何时不存在，而且首选MutationObserver API，这思路完全没问题——React本身没有专门内置的函数来直接处理这个场景，用原生的MutationObserver确实是最优解之一，毕竟它就是专门用来监听DOM树变化的。

你给的那段代码是等待元素出现的逻辑，那我们把它反过来改一改，就能实现监听元素移除的功能了。我给你整理好可用的代码，再一步步给你解释：

function waitForElmRemoval(selector) {
    return new Promise(resolve => {
        // 先检查元素是否已经不存在了
        if (!document.querySelector(selector)) {
            return resolve();
        }

        const observer = new MutationObserver(mutations => {
            // 每次DOM变化后检查元素是否已移除
            if (!document.querySelector(selector)) {
                observer.disconnect(); // 断开观察者，避免内存泄漏
                resolve();
            }
        });

        // 监听body的所有子元素及后代元素的增删变化
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

代码说明： #

• 这个函数接收一个选择器参数（比如你用ID选择的话，就传#your-element-id），返回一个Promise，当元素从DOM中移除时，Promise就会resolve
• 函数一开始先做一次检查：如果元素已经不在DOM里了，直接resolve，不用启动观察者
• 如果元素还存在，就创建MutationObserver实例，它会监听DOM的变化；每次DOM有增删操作时，就触发回调函数，检查元素是否已经不存在
• 一旦检测到元素不存在，立刻断开观察者（非常重要，不然会一直监听DOM，造成内存浪费），然后resolve Promise
• 监听配置里的childList: true是告诉观察者要监听目标节点的子元素增删，subtree: true是让监听范围覆盖目标节点的所有后代元素，这样不管元素在DOM树的哪个层级被移除，都能检测到

针对React场景的小提醒： #

如果你是在React组件里使用这个函数，记得在组件卸载的时候手动断开观察者哦！比如可以把观察者实例存在useRef里，然后在useEffect的清理函数里调用observer.disconnect()，避免组件卸载后还残留监听逻辑，导致内存泄漏。

另外如果遇到「parameter 1 is not of type 'Node'」的错误，大多是因为调用函数时document.body还没加载完成，你可以把监听的目标改成组件已经渲染好的根节点（比如你组件的ref对应的DOM节点），这样不仅能解决错误，还能缩小监听范围，提升性能。

备注：内容来源于stack exchange，提问作者mattsmith5