Why we don't need to write let button = event.target and just start with let li = event.target.parentNode;?

let li = event.target.parentNode;

let li = event.target;

let li = event.target.parentNode;

event.target

.parentNode

// Both of these them are the same apart from the variable naming
let button = event.target;
let li = event.target;

let button = event.target; // would not necessarily target the button on the page
// event.target itself is what causes the button to be targeted
// you can name the variable whatever you like, for example

let test = event.target;
let button325632 = event.target;
let y634g3g34g34gv34 = event.target;

// these will all target the button as long as they are in the scope of <div class='list'> due
// to the if statement

event.target.tagName === 'BUTTON'

// event.target becomes whatever you click on the page, for example
// if you click on the list element <li>, it will be targeted, meaning it's selected
// if you click on the button <button>, the button is now selected and can be referenced by the event.target
// You probably got confused because he set the variable to li
let li = event.target;
// So you thought that you can target the button by giving the variable name button
let button = event.target;
// which is not true

// You can see here that we set a listener 
listDiv.addEventListener('click', (event) => {

})

// Which means that it is listening for 'clicks' within the listDiv container
// So every time you click within the listDiv container, it will select WHATEVER you clicked on
// thanks to the event.target

const listDiv = document.querySelector('.list');

listDiv.addEventListener('click', (event) => {

})

// This is our scope now, we can click anything within this scope and have it selected
// due to event.target

//<div class='list'>
//            <ul>
//               <li> grapes
//                    <button>Remove</button>
//                </li>
//            </ul>
//        </div>

// If we click the li element, it becomes selected
// if we click the button element, it becomes selected
// and so on
// We store those selections in variable, like this
let li = event.target;

// we choose convenient names like, li, button, div, only so that we can quickly find out what we are referring to
// the variable names, li, button, div, does not mean that we are directly selecting those elements
// whether we select the li, button, div is purely based on the event.target event.
// So as you can see
//               <li> grapes
//                    <button>Remove</button>
//                </li>
// the button is nested inside the list element tag, and since we are trying to remove the list element by clicking
// on the button, we first need to store that event in a variable so that we have a reference to where is and which list 
// element we are trying to remove.
let li = event.target.parentNode;
// this variable conveniently named li is set to the event.target which would be the button that we clicked and we are
// getting the parent node of the button, again it does not matter what you name the variable to be
// all of these WILL target the BUTTON because we CLICKED on it
let button534tm34fgm34 = event.target.parentNode;
let lgfdbhddbhdfbdf = event.target.parentNode;
let gregertg4gt34t43 = event.target.parentNode;
// the button element itself is store in the event.target when we click on the button.
//  and we use the .parentNode because we want to get the list element
// and the way we do it is by getting the button's parent, which just happens to be the list element 
// why is button's parent the list element?
// because the button is nested inside the list element.