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.

The MutationRecord read-only property removedNodes is a NodeList of nodes removed from a target node by a mutation observed with a MutationObserver.

Value

A NodeList containing the nodes removed from the target of the mutation observed by the MutationObserver.

Examples

Observing removed nodes

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

The logRemovedNodes() function checks that the MutationRecord's type is childList, which means that the target node's children have changed. If the type is childlist 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 case record.removedNodes will have a length of 0.

HTML

html
<button id="add-nodes">Add a node</button>
<button id="remove-nodes">Remove a node</button>
<button id="reset">Reset</button>

<pre id="counter">Total removed nodes: 0</pre>
<div id="target"></div>

JavaScript

js
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 = 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 });

Result

Specifications

Specification
DOM Standard
# ref-for-dom-mutationrecord-removednodes②

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
removedNodes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support