Обработка событий на динамически созданных элементах, JS

Помогите, пожалуйста, разобраться.

есть такая разметка

<div class="wrapper">
   <ul class="list">
      <li class="list__item1">Кнопка 1</li>
      <li class="list__item2">Кнопка 2</li>
   </ul>
   <div class="outer">
      <div class="inner"></div>
      <a href="#" class="btn">Кнопка 3</a>
   </div>
</div>

при нажатии на Кнопку 2 у меня должна удалиться Кнопка 3. С этим сложностей нет у меня, потому что Кнопка 3 есть на странице и удалить ее не сложно. Потом мне нужно чтобы при нажатии на Кнопку 1 опять появилась Кнопка 3, с этим тоже я справился. Но потом мне нужно повторить процедуру: при нажатии на Кнопку 2 удалить Кнопку 3. И вот с этим уже у меня сложности. На втором заходе Кнопка 3 не хочет удалятся, из-за того, насколько я понимаю, что она уже создана динамически.

Переменные объявлены так:

const btn = document.querySelector('.btn');
const list = document.querySelector('.list');

Обработчик получился такой:

list.addEventListener('click', event => {
   if (event.target.classList.contains('list__item2')) {
   btn.remove(); // удаляю Кнопку 3
   }
   if (event.target.classList.contains('list__item1')) {
      inner.insertAdjacentHTML("afterend",  createButton()); // создаю Кнопку 3
   }
});