DEV Community

Roman Yurchenko
Roman Yurchenko

Posted on • Edited on

Binding Event Listeners to Dynamically Created Elements in JavaScript

We have the existing <li> HTML elements that contain "programming languages" and buttons "delete" and we can remove any programming language clicking the "delete" button.

Image description

We can add dynamically created <li> elements with "Frameworks" and buttons "delete" by "click" or "keypress" events using input value.

To create and add new <li> HTML elemenets dynamically the insertAdjacentHTML() JavaScript method was used:


const button = document.querySelector(".button-add-framework");

const input = document.querySelector("#input-value");

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

/*Add an element at the beginning of the list clicking "Add Framework" button*/

button.addEventListener("click", function () {
  if (input.value !== "") {
    const li = `<li class = "element-list">${input.value}<span>framework</span><button class="btn-delete">delete</button></li>`;
    ul.insertAdjacentHTML("afterBegin", li);
    input.value = "";
  }
});

/*Add an element at the beginning of the list pressing key "Enter"*/

input.addEventListener("keypress", function (e) {
  if (e.key === "Enter" && input.value !== "") {
    const li = `<li class = "element-list">${input.value}<span>framework</span><button class="btn-delete">delete</button></li>`;
    ul.insertAdjacentHTML("afterBegin", li);

    input.value = "";
  }
});
Enter fullscreen mode Exit fullscreen mode

Now, We can add Frameworks to our list by entering any Framework and clicking "Add Framework" button:

Image description

We want to remove added <li> element by clicking “delete” button. The problem is that an ordinary code will affect only <li> elements with “programming languages” but the Dynamically Created Elements with “frameworks” will not be affected:

const deleteButtons = document.querySelectorAll(".btn-delete");

deleteButtons.forEach((delBtn) => {
 delBtn.addEventListener("click", () => {
   delBtn.parentElement.remove();
  });
});
Enter fullscreen mode Exit fullscreen mode

So, It means that we can delete only “programming languages” but not added “frameworks” by clicking “delete” button !

To solve this problem and make our new added <li> elements (with “frameworks” and “delete” buttons) clickable, we use "Event Delegation" pattern!

It means that we are adding handling of the event not directly to our <button> “delete” element but to the <ul> element that contains all <li> elements and stands above them in DOM structure. So, We are “catching” an event triggered in our <ul> element that matches our selected “delete” <button> element:

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

ul.addEventListener("click", (event) => {
  if (event.target.classList.contains("btn-delete")) {
    event.target.parentElement.remove();
  }
});
Enter fullscreen mode Exit fullscreen mode

We used the classList property and the contains() method to "catch" the "click" event on the HTML element that we need: event.target.classList.contains ("btn-delete") !

CONCLUSION:

Using "Event Delegation" pattern we can provide an element we need with the event handler, based on the event attached to its parent element or to the element standing higher in the DOM. It allows us to include all Dynamically Created Elements to the list of the event handlers that we need !

https://js-event-delegation.netlify.app/

https://romannet77.github.io/js-event-delegation/

2022 Written and Developed by Mr. Roman Yurchenko

Top comments (0)