Mutation Observer無法檢測元素的dom移除

Question

所以，我認為這將是非常簡單的，曾經是一個DOMNodeRemoved事件，但是已經棄用了，相反，應該使用MutationObserver ，事實是，它不會觸發，即使是合適的配置。

根據這篇關於從變異事件遷移到變異觀察者的文章，用於檢測節點的dom移除的配置是{ childList: true, subtree: true } ，並且適合給出childList是必須的，而subtree意味着它將捕獲突變而不僅僅是目標，但也根據mdn文章 觀察目標的后代 。

無論如何，我做了一個的jsfiddle的問題，這是很簡單的，在<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解決您的問題。