Search code examples
javascripthtmljquerycsscss-selectors

How to exclude element with attribute from selector regardless of value


I'm working a framework that create on screen certain elements that should not be modified in any way, at all, ever, under any circumstances . These elements always have a data-for attribute with some value.

I know I could exclude them from a selector by using not command like:

 input:not([data-for], .exclude)

In case of having a value I know I could do something like

input:not([data-for=lalala], .exclude)

The problem is that I won't know the value at development time and the first option only works when the attribute has no value. Is there another to do this?


Solution

  • The input:not[data-for] selector should work. See below:

    $(document).ready(function(){
      console.log($('input[data-for]').length);
      console.log($('input:not([data-for])').length);
    });
    input{ display: block; }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input data-for="" />
    <input data-for="something" />
    <input />
    <input />
    <input data-for="something" />
    <input data-for="" />