Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Using previousElementSibling and insertBefore

Posted by Ming Chi Wong
Ming Chi Wong
2,909 Points

What is an element sibling?

I don't quite understand what an element sibling is?

Dylan Glover
Dylan Glover
2,537 Points

Sibling elements are elements that share the same parent. For example all of the <li> within a <ul> would be siblings of each other. 

<ul class="parent">
  <li>sibling</li> 
  <li>sibling</li>
  <li>sibling</li>
</ul>

Hope this helps!

Ming Chi Wong
Ming Chi Wong
2,909 Points

Thanks a lot! This helped me a lot!

Ming Chi Wong
Ming Chi Wong
2,909 Points

Does previousSibling exist that is used in the video?

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

A "sibling" is any other element that is in the same container. For example, all the option elements inside a select are siblings.

The "previousSibling" is the sibling that comes just before the current item. Note that this is a node-based term so you may prefer to use "previousElementSibling" instead in most cases. This guarantees a reference to another element and not something like a text node.

Ming Chi Wong
Ming Chi Wong
2,909 Points
Ming Chi Wong
Ming Chi Wong
2,909 Points

Theres another part of the video where I don't understand.

let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li);
Isn't <li> meant to be a child node? I don't quite understand this part? ---> let li = event.target.parentNode;

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

The <li> is both a parent and child. It's a child of the <ul>, but it's the parent to the element that caused the event. That element is inside the <li>.