Javascript DOM, How to figure out which event listener fired?

Question

I'm not quite sure how to phrase my main question in the title but I'll try my best to explain it down here. I'm creating a javascript app that takes user input and then adds it as a list item into a list. I want each list item to have a button that will delete the corresponding list item when pressed. Here is my code:

function addToList(){
  removeBtn = document.createElement('button');

  listItem = document.createElement('li');
  listItem.textContent = row[0]+ ' $' + row[1]+ ' ' + row[2]+' ';

  removeBtn.addEventListener('click', removeLi);

  listItem.appendChild(removeBtn);

  list.append(listItem);
}

I've tried a couple things but I just dont know what to put in my removeLI function that will delete the parent <li> of the button that got clicked. Any help would be much appreciated

I strongly suggest putting const, let or var in front of your variable declarations. Using global variables like this is going to lead to problems — Phil
– Phil, Commented May 1, 2020 at 0:11

epascarello · Accepted Answer · 2020-05-01 00:13:46Z

1

Use the event target and reference the li element with closest

function removeLi(event) {
  event.target.closest('li').remove()
}

var list = document.querySelector("#list")

function addToList(text){
  var removeBtn = document.createElement('button');

  var listItem = document.createElement('li');
  listItem.textContent = text

  removeBtn.addEventListener('click', removeLi);

  listItem.appendChild(removeBtn);

  list.append(listItem);
}

addToList(1)
addToList(2)
addToList(3)

<ul id="list"></ul>

answered May 1, 2020 at 0:13

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Silence Over a year ago

Thank you for helping me out, just added it to my program and it works great. Since that code doesn't explicitly pass anything into removeLI, does the "event" get passed into it automatically?

Collectives™ on Stack Overflow

Javascript DOM, How to figure out which event listener fired?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related