Skip to Content
Learn
Traversing the DOM
Parent & Siblings

In addition to the .children() method we covered in the last exercise, there are two methods you can use to select the parent and siblings of an element.

$('.choice').on('click', event => { $(event.currentTarget).parent().hide(); });

In the example above, the .parent() method targets the parent element of '.choice' elements and removes it from the DOM.

$('.choice').on('click', event => { $(this).siblings().removeClass('selected'); $(event.currentTarget).addClass('selected'); });

In the code above, the .siblings() method targets elements adjacent to the clicked '.choice' and removes the 'selected' class from any previously clicked '.choice's. Then the 'selected' class is added only to the clicked '.choice'.

Instructions

1.

Now, click on multiple shoe sizes for one shoe and notice that they all light up. In order to remove the active class from all of the other shoe sizes, you can utilize .siblings().

Write another selector for the shoe size selected using $(event.currentTarget). Then, select all of its siblings with .siblings().

2.

Use the .removeClass() method to remove the active class from all of the current target’s siblings. You can chain .removeClass() directly onto the .siblings() method.

Folder Icon

Sign up to start coding

Already have an account?