nodeRemoveMethods

Prefer the modern node.remove() method over the legacy parentNode.removeChild(node) API.

✅ This rule is included in the browser logical preset.

The Node.remove() method provides a more direct and modern way to remove an element from the DOM compared to the legacy removeChild() API. It’s more concise and easier to read, eliminating the need to reference the parent node.

Modern browsers support Node.remove(), making it the preferred approach for removing DOM elements.

Examples

❌ Incorrect

parentNode.removeChild(childNode);

element.parentNode.removeChild(element);

node.parentElement.removeChild(node);

document.body.removeChild(footer);

✅ Correct

childNode.remove();

element.remove();

node.remove();

footer.remove();

Options

This rule is not configurable.

When Not To Use It

If you need to support very old browsers that don’t implement the Node.remove() method (such as Internet Explorer), you might not want to enable this rule. However, for most modern web applications, Node.remove() has broad browser support.

Further Reading

• MDN: Node.remove()
• MDN: Node.removeChild()

Equivalents in Other Linters

• ESLint: unicorn/prefer-dom-node-remove
• Oxlint: unicorn/prefer-dom-node-remove