Как правильно удалить элемент из NodeList?

let elements = Array.from( document.querySelectorAll('.element') ); 
let other = document.querySelectorAll('.other'); 
let i = 0; 
 
nodeListDemo(elements); 
 
elements[0].onclick = bubu; 
 
function bubu(){ 
  this.onclick = null; 
  this.classList.remove('nodeList'); // удалил демо-класс с кликнутого элемента 
 
  elements.shift();                  // удалил первый элемент из elements 
  elements.push( other[i++] );       // добавил другой элемент с конца 
   
  nodeListDemo(elements);            // всё, что стало зеленым - принадлежит elements 
  elements[0].onclick = bubu;        // первый элемент уже другой - обработчик на него. 
} 
 
function nodeListDemo(elems){ 
  elems.forEach( e => e.classList.add('nodeList') ); 
}

.element, .other { 
  width: 50px; 
  height: 50px; 
  margin: 5px; 
  display: inline-block; 
  background-color: orange; 
} 
 
.other { background-color: #f36700; } 
 
.nodeList { 
  background-color: green; 
}

<div class="element"></div> 
<div class="element"></div> 
<div class="element"></div> 
<div class="element"></div> 
<div class="element"></div> 
<hr> 
<div class="other"></div> 
<div class="other"></div> 
<div class="other"></div> 
<div class="other"></div> 
<div class="other"></div>