А с чего он, собственно, остаётся в коде? Всё работает:
<div id="event">1</div>
<div id="event">2</div>
<div id="event">3</div>
<div id="event">4</div>
<button onclick="deleteNext()">delete next</button>
<script>function deleteNext(){
document.querySelector('#event').remove()
}</script>
Это во-первых.
А во-вторых, много одинковых id на странице - это говнокод и нарушение стандарта. id - это уникальный идентификатор и может быть на странице только один. Используйте калассы или data-x аттибуты.
Ну в-третьих:способ таки получить все id на странице вопреки стандарту есть: document.querySelectorAll('[id="event"]'), но использовать его стоит если уж совсем никак не можешь исправить код на нормальный.