Как реализовать решения по привязке событий к динамически создаваемым элементам с учетом конструкции моего проекта

Question

<!-- language: lang-js -->
(function()
{
   //add item to the cart
   const cartBtn = document.querySelectorAll('.bi- 
   shopping-bag4');

     cartBtn.forEach(function(btn)
     {
         btn.addEventListener("click", function(event)
         {
              //code goes here...
         })
     })

     //remove item from the cart
     const deleteBtn= document.querySelectorAll('.zmdi-delete');
     cartBtn.forEach(function(btn)
     {
         btn.addEventListener("click", function(event)
         {
             //code goes here...
         })
     })

})();

добавить товар в корзину : динамически добавлять созданный элемент 'div' в качестве дочернего в его родительский div.

удалить товар из корзины : удаляет эти динамически добавленные элементы из корзины с помощью функции element.remove ().

Кнопка удаления не предупреждает о событии щелчка.Я знаю, что должен реализовать что-то, связывающее событие удаления с динамически добавляемыми элементами, но решения в событии связывания для динамически создаваемых элементов не решают мою проблему или, скорее всего, я не смог правильно его реализоватьв моем проекте шаблона.Что я сделал до сих пор:

1) Я пытался добавить jquery fn.on в eventListeners, я просто изменил синтаксис js btn.addEventListener("click", function(event) с помощью jquery $(btn).on("click", function(event)

2) Iпытался реализовать чистое решение js:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

const cartBtn = document.querySelectorAll('.bi-shopping-bag4');         
cartBtn.forEach(function(btn)
{
    btn.addEventListener('click', function (e) 
    {
      if (hasClass(event.target, 'bi-shopping-bag4')) {
        // ..bi-shopping-bag4clicked
        // Do your thing

    }, false);
})

const deleteBtn= document.querySelectorAll('.zmdi-delete');
deleteBtn.forEach(function(btn)
{
    btn.addEventListener('click', function (event) 
    {
      if (hasClass(event.target, 'zmdi-delete')) {
        // ..bi-shopping-bag4clicked
        // Do your thing

    }, false);
})

но безрезультатно .. Так что я сделал не так?