Tried to use querySelectorAll but failed

Question

I want to select the first id that has class a.

<li class="a" id="1">1</li>
<li class="a" id="2">2</li>
<li class="a" id="3">3</li>

var c = document.querySelectorAll(".a#1");
c.remove();

I use querySelectorAll but it got an error of

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.a #1' is not a valid selector.

I know in jquery it is done like $('.a#1').remove() and it will work but I'm using zepto, so I have to figure out in pure js.

Remove space between class and id`document.querySelectorAll("#1.a");` — Sudharsan S, Apr 21 '15 at 08:05
Out of pure interest, why `querySelectorAll(".a#3");`? You have the `id`, which *should* be unique, so couldn't you just use the (much more direct) `getElementById("3");`? — Adam Kewley, Apr 21 '15 at 08:07
You can't reuse IDs in a single document. They're called IDs for a reason. — Scimonster, Apr 21 '15 at 08:11
Hey, I'm unsure what you mean. Do you mean that you're using the same `id` elsewhere within the same page? If so, you might want to rethink your design. If the `id` is somehow relevant to your backend, rather than a unique identifier of a `html` element, then you should hold it as metadata; for example, `

score 2 · Accepted Answer · edited May 23 '17 at 11:47

Id name with the number is not valid but you can query like below

document.querySelector('.a#\\31');

If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as \000031 or \31 .

For more information refer this Using querySelector with IDs that are numbers

Tried to use querySelectorAll but failed

1 Answers1