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.
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 = "";
}
});
Now, We can add Frameworks to our list by entering any Framework and clicking "Add Framework" button:
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();
});
});
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();
}
});
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)