Удаление элементов span из элемента div с помощью JavaScript

document.getElementById('remover').addEventListener('click', function()
{
  const elem = document.querySelectorAll('.main-category span');
  elem.forEach(e => e.remove());
});

<div class = "main-category">
    outside of spans<br>
    <span class = "first-category">foo</span>
    <span class = "last-category">bar</span>
    outside of spans<br>
</div>

<div class = "main-category">
    outside of spans<br>
    <span class = "first-category">hello</span>
    <span class = "last-category">world</span>
    outside of spans<br>
</div>
<button type = "button" id = "remover">Remove elements</button>