Есть ли возможность при всплытии проверить не target, а более внешний элемент на событие

Контент с кнопками добавляется динамически. Вместо того, чтобы каждый раз вешать обработчики, я добавил обработчик на постоянно существующиего родителя с проверкой event.target. Стоит ли так делать? И как быть, если в к кнопке есть другое элементы? Мне пришлось костылить, добавлять к каждому вложенному элементу тот же признак (data атрибут). Сейчас только один вложенный элемент, но если их будет много .. Была идея использовать closest, но когда клик не по кнопке в блоке, то проверка происоходит до самого корня. Есть ли возможность ограничить поиск closest только в пределах блока без велосипеда? Может есть другой хороший вариант? P.s. не отклонять совпадения вне блока, а вообще не проверять, меня беспокоит потенциальное падение производительности с ростом вложенности

let counter = 0

a.onclick = e => {
  let inner = document.createElement('div')
  inner.className = 'block'
  
  inner.innerHTML += `
    <button data-close>
      [button] #${counter++}<div>[div]<i>Hide</div>
    </button>
  `
  
  outer.append(inner)
}

outer.onclick = e => {
  let button = e.target.closest('[data-close]')
  if (button) button.closest('.block').remove()
}
div, button { 
  padding: 10px;
  margin: 10px;
  border: 1px solid #000;
}
<button id="a">Create</button>
<div id="outer"></div>


Ответы (0 шт):