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

Question

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

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

Answer 1

[0xD34F]

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

const output = document.querySelector('#classlist');
const container = document.querySelector('.wrapper');
const rowSelector = '.test';
const key = 'test';
const itemSelector = `[data-${key}]`;

container.addEventListener('click', function({ target: t }) {
  if (t = t.closest(itemSelector)) {
    const toRemove = Array.prototype.reduce.call(
      t.closest(rowSelector).querySelectorAll(itemSelector),
      (acc, n) => (n !== t && acc.push(n.dataset[key]), acc),
      []
    );

    this.classList.remove(...toRemove);
    this.classList.toggle(t.dataset[key]);

    output.textContent = this.classList;
  }
});

Answer 2

[Just A Bit]

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

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