<div class="container">
<div id="field">
<p>Здесь ниже ↓ буддут появляться кнопки
(<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);
This Pen doesn't use any external JavaScript resources.