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

Question

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?

Steven Parker · Accepted Answer

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":
js
$("#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:
js
 $("#these").on("click", "button", //etc...

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Dell'Ova

Jonathan Dell'Ova

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

1 Answer

Steven Parker

Steven Parker

Jonathan Dell'Ova

Jonathan Dell'Ova