MutationRecord: removedNodes property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheMutationRecord read-only propertyremovedNodes is aNodeList of nodes removed from a target node by a mutation observed with aMutationObserver.

Value

ANodeList containing the nodes removed from the target of the mutation observed by theMutationObserver.

In the following example, there are two buttons: one to add new nodes to a target node, and one to remove them. AMutationObserver is used to observe the target node for changes; when a change is detected, the observer calls a function,logRemovedNodes().

ThelogRemovedNodes() function checks that the MutationRecord'stype ischildList, which means that the target node's children have changed. If the type ischildlist the function updates the total number of nodes that have been removed. However, note that clicking the "Add a node" button will not increment the total number of removed nodes, because in this caserecord.removedNodes will have a length of0.

HTML

html

<button>Add a node</button><button>Remove a node</button><button>Reset</button><pre>Total removed nodes: 0</pre><div></div>

#counter {  border: 1px dotted black;  padding: 0.5rem;}

JavaScript

const addNodes = document.querySelector("#add-nodes");const removeNodes = document.querySelector("#remove-nodes");const reset = document.querySelector("#reset");const counter = document.querySelector("#counter");const target = document.querySelector("#target");let totalRemovedNodes = 0;addNodes.addEventListener("click", () => {  const newPara = document.createElement("p");  newPara.textContent = `Current time: ${Date.now()}`;  target.appendChild(newPara);});removeNodes.addEventListener("click", () => {  const lastChild = target.lastChild;  if (lastChild) {    target.removeChild(lastChild);  }});reset.addEventListener("click", () => self.location.reload());function logRemovedNodes(records) {  for (const record of records) {    // Check if the childlist of the target node has been mutated    if (record.type === "childList") {      totalRemovedNodes += record.removedNodes.length;      // Log the number of nodes added      counter.textContent = `Total removed nodes: ${totalRemovedNodes}`;    }  }}const observer = new MutationObserver(logRemovedNodes);observer.observe(target, { childList: true });