<div class="container">
  <div id="field">
    <p>Здесь ниже &darr; буддут появляться кнопки
      (<a href="#">добавить</a>)</p>
  </div>
</div>


#field {
  margin: 2em;
  padding: 2em;
  border: 1px solid #ccc;
  min-height: 12em;
}

.reset {
  margin-right: 1em;
}
View Compiled
const field = document.getElementById('field');
const link = document.querySelector('a');

const addBtn = e => {
  e.preventDefault();
  const button = document.createElement('button');
  button.classList.add('reset', 'btn', 'btn-danger');
  button.innerText = 'Reset';
  field.appendChild(button);
};

link.addEventListener('click', addBtn);

const onClick = e => {
  const { target } = event;
  if (!target.classList.contains('reset')) {
    return;
  }
  
  document.querySelectorAll('.reset').forEach(el => el.remove());
}

// слушать клики выше, на общем родителе
field.addEventListener('click', onClick);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.