Unable to get and change child elements

When I try to add a remove a class on an element I get the property 'remove' undefined. I am able to get the parent element using element.parentNode and when I log it I see that there are span child elements but when I try to log or remove a class it does not seem to see that there are span elements. What am I doing wrong? How can I get and make changes to the child elements? The complete code is on this codepen. Thank you.

$scope.update = function(event, filterText) {
  var parent = event.parentNode;
  console.log(parent);
  var children = parent.childNodes;
  console.log(children);
  children.forEach(child => {
    console.log(child);
    child.classList.remove('active-span');
  });

// UPDATED The following no longer produces property 'remove' undefined. However, the class still will not remove from the element.

$scope.update = function(event, filterText) {

  var spans = document.getElementsByClassName('header-span');
  Array.from(spans).forEach(span => {
    console.log(span);
    span.classList.remove('active-span');
  });
  
  event.classList.add('span-active');
  if(filterText === undefined){
    $scope.searchText = filterText;
  } else {
    $scope.searchText = function(e) {
      return (filterText.indexOf(e.Type) !== -1);
    };
  }
}

;