突變觀察者僅在父元素上觸發

Question

我正在嘗試使用MutationObserver監視應用程序庫中已刪除的節點，但看來當父級被刪除（或替換）時，它不會觸發所有子元素的回調。

<button class="RemoveListButton">Remove List</button>
<div class="Container">
  <ul class="ShoppingList">
    <li class="Item">Pasta</li>
    <li class="Item">Chips</li>
    <li class="Item">Salsa</li>
  </ul>
</div>

const removeWatcher = new MutationObserver(mutationList => {
    const removedNodes = mutationList.flatMap(m => [...m.removedNodes])
    console.log('Removing', removedNodes)
})

const container = document.querySelector('.Container')
removeWatcher.observe(container, { subtree: true, childList: true })

/* additional javascript to remove elements on click */

參見JSFiddle https://jsfiddle.net/eq4ahsvc/3/

在該示例中，當我刪除單個列表項（通過單擊它）時，我在控制台中看到該元素已被刪除，並且被突變觀察者看到。

但是，當我刪除整個列表時，只會為父級而不是單個子元素觸發Mutation Observer回調。

有沒有一種方法可以配置此行為？ 理想情況下，每個元素都將觸發MutationObserver回調，這樣，在刪除列表時，我會看到刪除列表的觸發器以及刪除每個子元素的觸發器。

Answer 1

子元素不會從其父元素中刪除，因此沒有觀察到的remove事件。 看到：

 const ul = document.querySelector('ul'); const li = ul.children[0]; ul.remove(); console.log(li.parentElement); 

 <button class="RemoveListButton">Remove List</button> <div class="Container"> <ul class="ShoppingList"> <li class="Item">Pasta</li> <li class="Item">Chips</li> <li class="Item">Salsa</li> </ul> </div> 

如您所見， <li>仍然具有.ShoppingList的父元素，因為.ShoppingList已從其容器中刪除，但各個<li>並未從.ShoppingList刪除。

如果要查看每個刪除的<li>事件，除了刪除.ShoppingList之外，還必須遍歷並顯式刪除它們：

 const removeWatcher = new MutationObserver(mutationList => { const removedNodes = mutationList.flatMap(m => [...m.removedNodes]) console.log('Removing', removedNodes) }) const container = document.querySelector('.Container') removeWatcher.observe(container, { subtree: true, childList: true }) const button = document.querySelector('.RemoveListButton') button.onclick = () => { document.querySelectorAll('.ShoppingList > li').forEach(li => li.remove()); document.querySelector('.ShoppingList').remove() } const listItems = document.querySelectorAll('.Item') listItems.forEach(item => item.onclick = () => { event.target.remove() }) 

 <button class="RemoveListButton">Remove List</button> <div class="Container"> <ul class="ShoppingList"> <li class="Item">Pasta</li> <li class="Item">Chips</li> <li class="Item">Salsa</li> </ul> </div> 

為此，您可以執行此操作，也可以遞歸地將觀察者回調內removedNodes數組中每個項目的所有子項展平。