Javascript – Select elements with empty or not-specified attribute

css-selectorshtmljavascriptjquery

Take the following, schematic html-code:

<div>
  <span id='1' cust-attr='' />
  <span id='2' />
  <span id='3' cust-attr='Foo' />
</div>

Now I am looking for a selector finding all spans which either do not have an attribute "cust-attr" or whose "cust-attr" value is empty.
In this case, this would be the 1 and 2.

I tried the following selectors with the following results:

  1. span[cust-attr!=] selects 2 and 3
  2. span[cust-attr=''] only selects 1
  3. span:not([cust-attr]) selects 2
  4. span(:not([cust-attr]),[cust-attr='']) selects all three
  5. span([cust-attr=''],:not([cust-attr])) selects 1

However, I did not find one selecting only 1 and 2.
Do you know a possibility?

Note that I want to avoid:

span:not([cust-attr]),span[cust-attr='']

as "span" is in reality a more complex expression.

Best Answer

Late to the party...

... or you could use CSS Selectors and be 10x as fast as both jQuery answers... :)

document.querySelectorAll("input:not([id]), input[id='']");

Proof