A delegated click event listener has been attached to the selected ul element, which is stored in the variable list. The

Thank you so much for that. I'm still a little confused - why do you need to involve <ul>? Both <button> and <p> are within <li> tags so why aren't <button> and <p> sibling elements, and 'children' of the parent node, <li>? If they were, then the 'previousElementSibling' to <button> would be <p>, because <p> becomes before <button> within the <li> tags. It's the need to include <ul> that's confusing me, I think! Thanks again.

So this challenge was tricky for me because I realized visualizing the path through the DOM can be a bit confusing and overwhelming. What I suggest is copy the challenges codes and past them into a testing workspace. During each step trying to solve this, I would log your code to the console. This way it is easier to see what your code is doing and if it's working as expected.

Here is what I did:

const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
   console.log(li);
  }
});

if you look at the console you'll notice that when you click a button, you'll notice that the console logs the li (list item) of the button you clicked. That's because the list item is the parent node of the button element. So let's try and get the parent node of the li element which should be the ul element that the li is nested inside and log it to the console.

const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
   console.log(ul);
  }
});

Now when you click on a button, you get the ul logged to the console, which shows all of it's children. Great! Now you have access to all nested elements inside the ul element. So how do we get the sibling of the button element, the elusive p element? quite simple actually. you use the previous element sibling method.

const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    let p = ul.previousElementSibling;
   console.log(p);
  }
});

now if you log a button click to the console, you'll see only one element is logged. The p element or the sibling of the targeted event. From there it's simple to add a class to the element itself.

const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    let p = ul.previousElementSibling;
   p.className = 'highlight';
  }
});

The reason it seems so confusing is because you have to select the parent node in order to gain access to all of it's children. When you click the button, the code is allowing you to bubble up from the node you selected all the way to parent node so the code can find not only the parent's children (i.e. the list items, p elements, and buttons), but also so it can find it's relationship to the element you clicked on. How would the code know that p is a sibling to button, if there isn't anything to reference it's relationship? It would be like missing parts of your family tree and guessing who your brother and sister are.