Удалить класс при динамическом создании элемента li

Question

У меня есть эта функция, которая создает список <li> элементов

function PrintListItems(nodes) {
  while (resultUl.firstChild) {
    resultUl.removeChild(resultUl.firstChild)
  }

  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i]

    var li = resultUl.appendChild(document.createElement('li'))
    li.setAttribute('data-id', i)

    for (var key in node) {
      var address = node['address'] + ', ' + node['zipcode'] + ' ' + node['city']

      if (key !== 'zipcode' && key !== 'city') {
        var span = document.createElement('span')

        span.className = key

        if (key === 'phone' || key === 'email' || key === 'web') {
          span.className += ' icon icon-' + key
        }

        span.textContent = (key === 'address') ? address : node[key]

        li.appendChild(span)
      }
    }
    resultListItem.push(li)
  }
  resultElm.addClass('active')
}

Параметры nodes - это JSON, полученный из REST API

У меня тогда есть эта функция

function ListItemHandler() {
  for (var i = 0; i < resultListItem.length; i++) {
    resultListItem[i].addEventListener('click', function() {
      var markerId = this.getAttribute('data-id')
      this.addClass('active')
      googleMaps.selectMarkers(markerId)
    })
  }
}

Это пометит элемент <li> активным классом, который работает. Но я хочу удалить «активный» класс из других <li> предметов.

Я не могу сделать resultListItem[i].removeClass('active') в обработчике кликов - это даст мне неопределенную ошибку. То, что я не могу удалить Класс на undefined.

Можно ли как-нибудь удалить класс на "не это"?

Answer 1

Можете ли вы попробовать с

resultListItem[i].classList.remove('active')

Answer 2

Вы должны удалить класс для каждого элемента li в вашем обработчике кликов, который отличается от того, на котором вы щелкнули.
Попробуйте код ниже

function ListItemHandler () {

  for (var i = 0; i < resultListItem.length; i++) {

    resultListItem[i].addEventListener('click', function () {
      for (var j = 0; j < resultListItem.length; j++) {
         resultListItem[j].removeClass('active')
      }
      var markerId = this.getAttribute('data-id')
      this.addClass('active')
      googleMaps.selectMarkers(markerId)

    })

  }    
}

Answer 3

сделайте это, прежде чем добавить класс к своему элементу

let list = document.getElementsByTagName("li").getElementsByClassName("active");
for (let item of list) {
    if (resultListIem.indexOf(item) === -1) {
        item.classList.remove("active")
    }
}