The Node.parentNode property returns the parent of a node in the DOM tree—or null if there is none. Learn parentNode vs parentElement, the classic removeChild pattern, and when Document parents appear.
Read-only property
Node or null
Element / Document
Always null
removeChild
Baseline widely
parentNode answers: “Who is above me in the tree?” That parent can be an Element (most UI cases), a Document (parent of <html>), or a DocumentFragment.
When you only want a tag parent for styling, prefer parentElement. When you need the full story—including Document—use parentNode.
The classic remove idiom is if (node.parentNode) node.parentNode.removeChild(node). In modern browsers you can also write node.remove().
parentNodeMDN: the read-only parentNode property returns the parent of the specified node in the DOM tree. Document and DocumentFragment nodes never have a parent, so their parentNode is always null. Newly created, unattached nodes also return null.
null when there is no parent.const parent = node.parentNode;
if (parent) {
parent.removeChild(node);
}A Node that is the parent, or null if there is none.
parentNode vs parentElementnode.parentNode | node.parentElement | |
|---|---|---|
| Returns | Any parent Node (or null) | Parent Element only (or null) |
Child of a div | That div | That div |
<html> | document | null |
| Detached node | null | null |
| Best for | Full tree / removeChild | UI Element parents |
| Goal | Code |
|---|---|
| Get parent | node.parentNode |
| Remove self (classic) | node.parentNode?.removeChild(node) |
| Remove self (modern) | node.remove() |
| Element parent only | node.parentElement |
<html> parent | document.documentElement.parentNode → document |
| MDN status | Baseline Widely available (since July 2015) |
Four facts to remember about Node.parentNode.
Node | nullAny parent
widelySince July 2015
read-onlyNo assignment
nullNever have parents
Examples follow MDN Node.parentNode patterns. Use View Output or Try It Yourself for each case.
Read the parent and remove a node safely.
A child inside a wrapper reports that wrapper as parentNode.
const child = document.getElementById("child");
const parent = child.parentNode;
console.log(parent.id); // "wrap"
console.log(parent.nodeName); // "DIV"For an Element parent, parentNode and parentElement usually match. The difference shows up at the document root.
parentNode (MDN-style)Only call removeChild when a parent exists.
const node = document.getElementById("child");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
console.log(document.getElementById("child")); // nullThe guard skips work when the node is already detached. After removal, parentNode becomes null.
See Document as a parent, know who never has one, walk upward.
<html> Parent Is the DocumentThis is where parentNode and parentElement diverge.
const html = document.documentElement;
console.log(html.parentNode); // document
console.log(html.parentNode.nodeName); // "#document"
console.log(html.parentElement); // nullThe Document is a Node but not an Element. parentNode returns it; parentElement does not.
null?Documents, fragments, and detached nodes have no parent.
console.log(document.parentNode); // null
const frag = document.createDocumentFragment();
console.log(frag.parentNode); // null
const orphan = document.createElement("div");
console.log(orphan.parentNode); // nullPer MDN, Document and DocumentFragment never have parents. Unattached created nodes also report null until appended.
Walk parentNode until null—you will see #document.
let n = document.getElementById("child");
const path = [];
while (n) {
path.push(n.nodeName);
n = n.parentNode;
}
console.log(path.join(" → "));
// e.g. SPAN → DIV → BODY → HTML → #documentUnlike a parentElement climb (which stops at HTML), this walk includes the Document before ending at null.
parentNode.removeChild(node) when attached.!!node.parentNode (or use isConnected).parentNode WorksAttached nodes point to the node that contains them.
Element, Document, or DocumentFragment in normal cases.
No parent yet, or the node is Document / DocumentFragment.
Remove, climb, or fall back when there is no parent.
node.remove() in modern code when you only need to detach.Node.parentNode is Baseline Widely available across modern browsers (MDN: since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.
Safe for production. Use parentNode for any parent type; use parentElement when you only want an Element.
Bottom line: Use parentNode for full parent access and classic removeChild; use parentElement for Element-only UI parents.
Node.parentNode returns any parent Node or null. Use it for full tree walks and the classic remove pattern; switch to parentElement when you need an Element for styling APIs.
Continue with previousSibling, parentElement, or the JavaScript hub.
removeChildparentNode when Document parents matterparentElement for Element-only UI worknode.remove() for simple detachisConnected when teaching attachmentparentNode (read-only)removeChild without a parent guardNode with the Node.js runtimeparentNodeAny parent Node—or null.
or null
APIbroader
Compareclassic pattern
Pattern#document
Rootalways null
GotchaMDN’s remove example is still the cleanest mental model for beginners: only ask the parent to remove you if you have a parent. That single if (node.parentNode) guard prevents a common runtime error on detached nodes.
Read the previous sibling node—or null at the start of the list.
5 people found this page helpful