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

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';

function toggleUntilNextItem(el) {
  while ((el = el.nextElementSibling) && !el.matches(itemSelector)) {
    el.classList.toggle(className);
  }
}

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleUntilNextItem(e.currentTarget));

// или

document.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    toggleUntilNextItem(item);
  }
});

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')