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 AJAX Basics (retiring) AJAX and APIs Adding jQuery

if I were to use the .on() method on the ul element instead, how would i complete this challange?

Let's say my boss tells me that he/she wants a button under every picture that copies the URL to the users clipboard or something similar to that. Now I have way more buttons on the page and I don't want to use the same callback function that I used on the tag selection buttons.

In previous videos it was explained to be better to use event delegation in these kinds of cases but how would I do this?

$(document).ready( function() { $(".filter-select").on("click", "button", function (e) { const ul = $(this).parent().parent(); $(this).addClass("selected");

}); });

I know how to add the class but I have difficulties removing the class from all the other buttons. I thought of either selecting the parent ul and then select all buttons from there and remove the class before attaching it. Or I could only go to the parent of the button itself and then select that element siblings and remove the class name from their children

I think how to traverse the dom in such a way has been explained in a previous video but I can't seem to find it. Can somebody find me a solution? How would I search for all buttons that are under a selected ul tag/element instead of under the whole document?

1 Answer

Steven Parker
Steven Parker
229,005 Points

I don't quite understand the part about removing a class (why this is needed), but I can answer the final question:

"How would I search for all buttons that are under a selected ul tag/element instead of under the whole document?"

You can use combined CSS-style selectors in jQuery, so for this situation you can use a descendant selector. For example, if you wanted only button elements inside a ul that had an id of "these":

$("#these button").// chain other functions here

But if your intention is to add a delegated handler for those buttons, you can do it without selecting them individually, similarly to your other example:

 $("#these").on("click", "button", //etc...

Thank you for the answer, this certainly helped!

In this exercise the tree house team wanted me to add a class to a clicked button that would make some css changes to it but everytime i click a button i also have to remove that class from all other buttons so that only one button stays highlighted at all times.

I did find a solution to this though and that is using what you mentioned which was the descendant selector!