I am encountering an issue where the 'remove' property is showing as undefined when I try to add or remove a class on an element. Upon inspecting the parent element using element.parentNode, I can see that there are child span elements present. However, when attempting to log or remove a class from these span elements, it seems like they are not being recognized. Can anyone point out what I might be doing incorrectly? How can I successfully get and make changes to these child elements? You can find the complete code snippet on this CodePen link. 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');
});
// UPDATE: The error regarding property 'remove' being undefined has been resolved. However, the class still persists on the element despite removal attempts.
$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);
};
}
}
;