Как скрыть элементы между элементами с определённым классом?

Question

[sickgang]

Нужно, чтобы при клике на .item-service скрывались элементы, расположенные между кликнутым и следующим .item-service.
Как это сделать?

<tbody>
  <tr class="Item-service"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr class="Item-service"></tr>
  <tr></tr> 
  <tr></tr>
  <tr></tr>
</tbody>

Answer 1

[0xD34F]

.hidden {
  display: none;
}

const itemSelector = '.item-service';
const className = 'hidden';

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick() {
  for (
    let el = this;
    (el = el.nextElementSibling) && !el.matches(itemSelector);
    el.classList.add(className)
  ) ;
}

Comments

[sickgang]

Спасибо большое, работает!

Answer 2

[alexalexes]

На чистом JS будет так.

....
   <tr class="Item-service" onclick="hide_trs(this)"></tr>
....

function hide_trs(target)
  {
        var parent = target.parentNode;
        var tr_nodes = Array.prototype.slice.call(parent.getElementsByTagName('TR'));
        var tr_count = tr_nodes.length;
        var target_index = tr_nodes.indexOf(target);
        for(var i = target_index + 1; i < tr_count; i++)
        {
          var cur_tr = tr_nodes[i];
          if(cur_tr.className !== 'Item-service')
            cur_tr.style.display = 'none';
          else
            break;
        }
  }

PS: Есть ограничения:
1) В строках нельзя использовать вложенные таблицы ( tr_nodes - получит все строки вложенных таблиц в том числе);
2) Кликабельному tr нельзя добавить еще класс (идентификация следующего кликабельного tr производится строго по содержимому свойства класса cur_tr.className !== 'Item-service')