In this article, you’ll learn how to remove the parent element of a Node using JavaScript. Methods in both JQuery and pure JavaScript will be covered.
Remove the parent element of a Node using JavaScript
For simplicity’s sake, this article will be using the example of: “Removing the parent of "child2-2"
in this HTML block”. See here:
<div id="LearnShareIT"> <div id="parent1"> <div id="child1-1">C1-1</div> <div id="child1-2">C1-2</div> <div id="child1-3">C1-3</div> </div> <div id="parent2"> <div id="child2-1">C2-1</div> <div id="child2-2">C2-2</div> <div id="child2-3">C2-3</div> </div> </div>
Expected Output:
<div id="LearnShareIT"> <div id="parent1"> <div id="child1-1">C1-1</div> <div id="child1-2">C1-2</div> <div id="child1-3">C1-3</div> </div> </div>
Using the .parent()
and .remove()
function (JQuery)
The author wishes to stress: If you are dealing with HTML DOM Elements, use JQuery.
JQuery is a JavaScript library specialized in the traversal and manipulation of HTML DOM Elements for animations, event handling, and Ajax.
For anyone new to JQuery, it is required that you understand what a JQuery Selector is (“$()”). A Selector can be imagined as the shorthand version of the Document class’ .querySelector(), down to the use of a CSS Selector to access an Element. For a reference sheet for CSS Selectors, go here.
More importantly, the question is the .parent() and .remove() functions. Both functions do exactly as it states – the .parent() function gets the selected Element’s parent Element and the .remove() function removes the Element from the document.
For example:
function deleteChildParent(childId) { const child = $("#" + childId); const parent = child.parent(); parent.remove(); } deleteChildParent("child2-2");
One thing to note is that the code can be further shortened and still be readable by chaining the functions together – this is a big appeal of JQuery for beginner programmers. Additionally, writing the code like the above is redundant as the Element being selected (the parent variable) will be deleted along with all of its children (the child variable). So to shorten it we have such:
Code:
function deleteChildParent(childId) { $("#" + childId).parent().remove(); } deleteChildParent("child2-2");
Using the .parentElement
property and the .remove()
function (JavaScript)
If you are truly dead-set on not using JQuery, a replacement would be to use the Node
class’ .parentElement
property and the Element
class’ .remove()
function – which in this case would be a stand-in for the .parent()
and .remove()
function respectively.
For example:
function deleteChildParent(childId) { const child = document.getElementById(childId); const parent = child.parentElement; parent.remove(); } deleteChildParent("child2-2");
Similarly, the code can be shortened; though without as much readability as the same thing in JQuery.
For example:
function deleteChildParent(childId) { document.getElementById(childId).parentElement.remove(); } deleteChildParent("child2-2");
As a side note, you may be wondering why the code was able to use a property and function from two seemingly different classes (the Node
class’ .parentElement
property and the Element
class’ .remove()
function). The reason is that the Element
class is actually inherited from the Node
class – which means whatever functions or properties a Node
class has, the Element
class has along with its functions.
Side note on the .parentNode
property and the .removeChild()
function (JavaScript)
There is technically a 3rd option, though generally, you’d be better off just using either option above. This option is explained only for completeness’ sake.
You could technically replace the .parentElement
for the .parentNode
property – which similarly gives you the selected Element’s parent though importantly returns a Node
instead of an Element
.
The Node
class does not have the .remove()
function, which belongs to the Element
class. However, it does have the .removeChild()
function – which as stated, removes a specified child of a selected Element.
So instead of removing the Element directly, you need to get the parent Element’s parent and remove its child (i.e., the child Element’s parent).
For example:
function deleteChildParent(childId) { const child = document.getElementById(childId); const parent = child.parentNode; const parentParent = parent.parentNode; parentParent.removeChild(parent); } deleteChildParent("child2-2");
Note that there won’t be a shortened version, as its unreadability far outweighs it’s length. It simply isn’t worth.
Summary
To remove the parent element of a Node using JavaScript, we advise you to use the JQuery method of the .parent()
and .remove()
function or use the .parentElement
property and the .remove()
function if are dead-set on using pure JavaScript.
You can read more other articles here, thanks for reading!
Maybe you are interested:
- Get an Element by Href Attribute using JavaScript
- Get the First element with specific Class name using JavaScript
- Get Child Element by Class using JavaScript

Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.
Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP