Learn

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

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().

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.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?