Overview
We use the parentElement property of a Node object to get the parent element of a DOM element. Similarly, we utilize the children property of the Element object to get all the children of a DOM element as a live HTMLCollection.
Example
Explanation
- Lines 5–10: We create a div element with the parent ID. Inside this element, we have another div element with a first_child ID. Inside the first_child div element, we add two span elements.
- Line 13: We create a variable named firstChild and assign the div element with the first_child ID as a value.
- Line 14: We access the parentElement property of the firstChild object.
- Line 15: We print the HTML content of the parentElement using the outerHTML property.
- Line 17: We access the children property of the firstChild object and store it in the variable named children.
- Lines 18–20: We loop the children variable and print the HTML content of all child elements.
RELATED TAGS
dom
html
communitycreator
parentelement
node
CONTRIBUTOR
Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector. selector A string containing a selector expression to match elements against. Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery
object from the matching elements. This method is similar to .parents(), except .parent() only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set. The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they
match it. Consider a page with a basic nested list on it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <li class="item-i">I</li> <li class="item-a">A</li> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> <li class="item-c">C</li> <li class="item-iii">III</li> If we begin at item A, we can find its parents:
1 $( "li.item-a" ).parent().css( "background-color", "red" ); .parent( [selector ] )Returns: jQuery
version added: 1.0.parent( [selector ] )
The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.
Examples:
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <title>parent demo</title> <script src="//code.jquery.com/jquery-3.5.0.js"></script> $( "*", document.body ).each(function() { var parentTag = $( this ).parent().get( 0 ).tagName; $( this ).prepend( document.createTextNode( parentTag + " > " ) ); |
Demo:
Find the parent element of each paragraph with a class "selected".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <title>parent demo</title> <script src="//code.jquery.com/jquery-3.5.0.js"></script> <div class="selected"><p>Hello Again</p></div> $( "p" ).parent( ".selected" ).css( "background", "yellow" ); |