CODEWITHSUNDEEP
javascripthtmlclass
Jaeeun Lee
Jaeeun Lee

Reputation: 3196

How to Select Element That Does Not have Specific Class

I'm wondering how to select an element that does not have a specific class using JavaScript, not jQuery.

For example, I have this list:

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

and I select the completed task by:

var completeTask = document.querySelector("li.completed.selected");

But then I'm not sure how to select the list item that does not have those classes.

Upvotes: 158

Views: 207867

Answers (6)

Igor Beuermann
Igor Beuermann

Reputation: 147

The :not(*selector*) selector also accepts commas (so does querySelectorAll()) https://developer.mozilla.org/en-US/docs/Web/CSS/:not#syntax:

let plainElements = document.querySelectorAll( ':not( .completed, .in-progress ) ');
plainElements.forEach( ( item ) => { item.style.color = 'red'; } );
li { color: green; }
<ul id="tasks">
  <li class="completed selected">Task 1</li>
  <li>Task 2</li>
  <li class="in-progress">Task 3</li>
</ul>

Upvotes: 12

Nick Grealy
Nick Grealy

Reputation: 25872

This selects the second LI element.

document.querySelector("li:not([class])")

or

document.querySelector("li:not(.completed):not(.selected)")

Example:

// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
 <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>

Upvotes: 293

Burhan Ibrahimi
Burhan Ibrahimi

Reputation: 377

document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
    // do whatever you want. with 'e' as element :P
});

Upvotes: 4

crunch
crunch

Reputation: 675

Try getting an array of the parent's children instead:

var completeTask = document.querySelector("#tasks").childNodes;

Then loop/search them as necessary.

Upvotes: 1

Musa
Musa

Reputation: 97672

You can try the :not() selector

var completeTask = document.querySelector("li:not(.completed):not(.selected)");

http://jsfiddle.net/UM3j5/

Upvotes: 13

BeNdErR
BeNdErR

Reputation: 17927

To select the <li> that has not completed nor selected class:

document.querySelector("li:not(.completed):not(.selected)");

Fiddle

http://jsfiddle.net/Z8djF/

Upvotes: 27

Related Questions