How To Remove The Parent Element Of A Node Using JavaScript

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

Davis Cole

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