querySelectorAll / is not a valid selector
 

Привет!

Делаю динамические табы.
Структура такая:

<ul>

    <li data-attr="a">....</li> 
    <li data-attr="b">....</li>
    <li data-attr="c">....</li>
     ...
    <li data-attr="z">....</li>

</ul>

<div>

    <div data-attr="a"></div>
    <div data-attr="b"></div>
    <div data-attr="c"></div>
     ...  
    <div data-attr="z"></div>
 
</div>

К каждому табу li привязан свой контект div. Табы создаются динамически, при создании им (li и div) задаётся data-attr, по которому потом при удалении они в связке и должны удаляться.

"Выборка" на удаление производится при помощи document.querySelectorAll(). Проблема в том, что в отличие от HTML5, в CSS3 не валидны названия селекторов, начинающихся с цифр.
При создании пользователь сам задаёт значение data-attr, которое и является названием самой вкладки таб.

Какими способами можно решить такую задачу?
Видятся следующие варианты:
1. Делать привязку к классу и выбирать потом по классу, а не по data-attr.
2. Присваивать автоматически значеніе для data-attr при создании табов, чтобы там по умолчанию не было в начале цифр. Например, "tab" + "название, введённое пользователем"
3. Блокировать ввод цифр для названия табов (только буквенные символы). Но такой вариант совсем не нравится.

Alexander Belov,
зачем data, разве индекса недостаточно?

зачем ещё-то нужно делать выборку?

рони,
1. Каким образом по индексу можно связать li и div? Учитывая, что табы могут добавляться и удаляться постоянно? Т.е. если например хранить всё в массиве, то индекс №..., например, не всегда будет соответствовать одному и тому же табу.

2. "Выборка" для удаления. Кликая на таб, мы находим div с таким же data-attr и удаляем их.

Alexander Belov,

сделайте макет ...

Alexander Belov, удаление по индексу

if (target == x[i]) {
                var li = document.querySelectorAll('.tab')[i],
                div =  document.querySelectorAll('.content')[i];
		 		li.parentNode.removeChild(li);
                div.parentNode.removeChild(div);
		 	}

рони,
Благодарю!
Всё намного проще, оказывается. Такой способ ещё не встречал.
:agree:

Alexander Belov,
проще будет при создании добавлять удаление -- тогда и цикла и индекса ненадо будет

рони,
Не понимаю, что Вы имеете в виду. При создании мы создаём элемент и прикрепляем его к родителю, нажав на кнопку Ок. Как туда удаление увязать?

+

Разве не должны функции разбиваться максимально по логике? Одна на добавление, вторая на удаление и т.д., каждая для своего предназначения.