Как удалять класс active у прошлого элемента?

Question

[bismoney]

Подскажите пожалуйста как скрыть прошлый элемент. Никак не могу разобраться.

Есть таблица которая с onClick вида:

<tr class="data__col" id="data__col" data-id="10849" onclick="OpenData(10849)"></tr>
<tr class="data__col" id="data__col" data-id="10868" onclick="OpenData(10868)"></tr>

И есть скрытые элементы

<div class="info__cc" id="show-10849"></div>
<div class="info__cc" id="show-10868"></div>

При нажатии на tr срабатывает функция которая ищет id == show-* и добавляет класс .active.
Но при нажатии на следующий, у прошло остаеться класс active.

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

Answer 1

[Сергей Соколов]

сначала у всех удалите класс,
потом добавьте его кликнутому.

Можно каждый раз выполнять поиск и удалять только у тех, где класс есть:

document.querySelectorAll('tr.active').forEach(el => el.classList.remove('active'));

Comments

[bismoney]

Спасибо большое Сергей! Долго не мог понять как искать класс и удалять по "циклу". Теперь мне все понятно)

[Сергей delphinpro]

Зачем цикл, если активный только один всегда?

[bismoney]

Сергей delphinpro, Нет, я имел ввиду в другой задаче. Тут понятно. Просто путался в этом, теперь стало понятно.

Answer 2

[Сергей delphinpro]

function OpenData(id) {
  // сначала удалить
  querySelector('.info__cc.active').classList.remove('active');
  // потом добавить
  ...
}

Comments

[bismoney]

Спасибо большое Сергей!