Как применить разные значения для элемента?

Question

[Игорь Мясников]

Добрый день.
Codepen
Как сделать так чтобы с одной "линии" давался только один класс?
(Н-р: не было на wrapper и класса color1 и класса color2)

Answer 1

[0xD34F]

.test1, .test2, .test3 - убрать цифры, пусть везде будет просто .test

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', ({ target: t }) => {
  const { test } = t.dataset;
  if (test) {
    const toRemove = Array
      .from(t.closest('.test').children, n => n.dataset.test)
      .filter(n => n !== test);

    wrapper.classList.remove(...toRemove);
    wrapper.classList.toggle(test);

    document.querySelector('#classlist').innerHTML = wrapper.classList;
  }
});

Answer 2

[Just A Bit]

Для этого надо ощичать предварительно все классы с враппера. Проблема в том, что вы тогда действительно очистите "все" классы. Если вы хотите очистить классы именно одной линии, то вам надо сделать что-то типа "группировки" линий, для того, чтобы очищать только класс определённой группы.

Несколько утрированный вариант, но, думаю сам смысл вам будет понятен, для дальнейшего развития.
https://codepen.io/anon/pen/XyZbbg