Deleting newly added elements by adding event listeners to them

Question

I want to delete items from the shopping list, the elements which are readily added in html are deleting successfully. But, whenever a new element is added into the list, that element is not getting deleted, and showing undesired behaviour.

This is my code:

var del = document.getElementsByClassName("delete");
var ul = document.querySelector("ul");
var liElements = document.querySelectorAll("li");

//Creating delete button
function createDeleteButton() {
  var delButton = document.createElement("button");
  delButton.classList.add("delete");
  delButton.appendChild(document.createTextNode("Delete"));
  addEventListnerToNewlyAddedDeleteItem(document.getElementsByClassName("delete").length);
  return delButton;
}


//Adding event listner to newly added delete button.
function addEventListnerToNewlyAddedDeleteItem(i) {
  del = document.getElementsByClassName("delete");
  del[i - 1].addEventListener("click", function(event) {
    deleteListElement(i);
  });
}


//Adding event listners to delete buttons specified in html file.
for (let i = 0; i < del.length; i++) {
  del[i].addEventListener("click", function(event) {
    deleteListElement(i);
  });
}


//Function to remove list element
function deleteListElement(i) {
  ul.removeChild(liElements[i]);
}

<ul>
  <li>Birthday cake <button class="delete">Delete</button></li>
  <li>Candles <button class="delete">Delete</button></li>
  <li>Party hats <button class="delete">Delete</button></li>
  <li>Baloons <button class="delete">Delete</button></li>
  <li>Flowers <button class="delete">Delete</button></li>
</ul>

Answer 1

The standard approach to deal with dynamically added elements is to make use of the concept of delegate listeners instead of listeners directly attached to the elements which might be dynamically created.

The idea relies on the concept of events bubbling up the DOM, so you attach your listener to the closest ancestor element which does not get dynamically altered.

Example for your code:

const ul = document.querySelector('ul');

//Creating delete button
function createDeleteButton() {
  const delButton = document.createElement("button");
  delButton.classList.add("delete");
  delButton.type = 'button';
  delButton.appendChild(document.createTextNode("Delete"));
  return delButton;
}

// event listener that removes list element when button is clicked
function deleteListElement(event) {
  const {
    target: btn
  } = event; // get the target property from the event object as a local variable btn
  if (btn.matches('button.delete')) {
    btn.closest('ul').removeChild(btn.parentElement);
  }
}

ul.addEventListener('click', deleteListElement);

document.getElementById('addListElement').addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = 'new Listitem';
  const btn = createDeleteButton();
  li.appendChild(btn);
  ul.appendChild(li);
})

<ul>
  <li>Birthday cake <button class="delete" type="button">Delete</button></li>
  <li>Candles <button class="delete" type="button">Delete</button></li>
  <li>Party hats <button class="delete" type="button">Delete</button></li>
  <li>Baloons <button class="delete" type="button">Delete</button></li>
  <li>Flowers <button class="delete" type="button">Delete</button></li>
</ul>
<button id="addListElement" type="button">Add item</button>