CODEWITHSUNDEEP
javascripthtml
6Michael6Myers6
6Michael6Myers6

Reputation: 29

Multiple Properties on an Element/Object

Can someone explain how this works? => let li = event.target.parentNode ; So event.target is a reference to the dispatcher of the event and i know that .parentNode returns the parent of the specified node element etc. But how does the entire thing work together? do these things happen in sequential and the get added together or something?

listDiv.addEventListener("click", (event) => {
  if(event.target.tagName === "BUTTON") {
  let li = event.target.parentNode ;
  let ul = li.parentNode ;
  ul.removeChild(li) ;
}
}) ;

Upvotes: 0

Views: 98

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44107

tl;dr event.target is the element that started the event, parentNode is that element's parent.

The entire thing works like this - event is an object containing all the relevant information about the event that was fired, including among other things target (the target of the event). This is the element that fired the element (e.g. the button that was clicked). This has all the properties of any other element you might select (with document.getElementById or document.querySelector) - as such, it has a parentNode property which refers to the DOM node one level above it.

Upvotes: 1

Related Questions