javascript - Mutation Observer 无法检测到元素的 dom 移除

Question

所以，我认为这会很简单，曾经有一个DOMNodeRemoved事件，但不推荐使用，相反，应该使用MutationObserver ，问题是，即使配置适当，它也不会触发。

根据这篇关于从变异事件迁移到变异观察者的文章，检测节点的 dom 移除的{ childList: true, subtree: true }配置childList是到mdn 文章。subtree

无论如何，我已经解决了这个问题，它非常简单，<button>删除<div>并且观察者应该记录突变记录，但它没有，看看你是否能弄清楚:)

HTML

<div>Oh my god karen, you can't just ask someone why they're white.</div>
<button>^Remove</button>

JavaScript

div = document.querySelector("div");
callback = function(records){
    console.log(records);
}
config = {
    childList:true,
    subtree:true
}
observer = new MutationObserver(callback);
observer.observe(div,config);

button = document.querySelector("button");
button.addEventListener("click",function(){
    div.parentNode.removeChild(div);
});

谢谢！

Answer 1

正如名称所暗示的那样，childList仅捕获对观察节点的直接子节点列表的更改，并将subtree任何指定的标准扩展到所有后代（它自己不做任何事情）。

但你什么都不做。您正在删除观察到的节点本身，同时保持其后代不变。

简单地观察div.parentNode应该可以解决您的问题。