Search code examples
javascriptjqueryhtmlcss-selectors

Select elements with empty or not-specified attribute

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.

Solution

  • Basically, don't.

    It's not good practice to put all your logic into the selector. It will end up being computationally highly expensive (because the parts need to be parsed out of a string before they are interpreted) and messy. Use the beauty of the filter method instead:

    $('span')
    .filter(function(){
        return !$(this).attr('cust-attr');
    });

    This removes all elements where cust-attr is a non-empty string from the selection.