Из-за чего ошибка в консоли?

Вот демка https://jsbin.com/kujeqefegi/edit?html,js,console,output Есть простой html и скрипт, часть которого отвечает за добавление новых блоков, а часть за удаление:

// Добавлене блоков
var div = '';
var next_id = 3;
add_block.onclick = function() {
    next_id++;
    var div = document.createElement('div');
    div.id = 's'+next_id;
    div.className = 'text block';
    var template = 'new - удали меня';
    div.innerHTML = template;
    main.appendChild(div);
};
//Удаление блоков
main.onclick = function() {
  var DelButtons = document.querySelectorAll('.text.block');
  var DelButtonsArray = Array.from(DelButtons);
  DelButtonsArray.forEach(function(button){
      button.addEventListener('click', function(e) {
          document.getElementById(e.target.id).remove();
      })
  });
}

Да я знаю что метод .remove() не кроссбраузерный, вопрос сейчас в другом, после удаления в консоли появляется ошибка:

Uncaught TypeError: Cannot read property 'remove' of null at HTMLDivElement.

Он пытается получить доступ к id который только что удалён что ли был? Как это предотвратить?