-2

I try to replace the .not() function of jQuery with a native way and unfortunately my use case with document.querySelectorAll is not working.

This is what I want to achieve - changing the jQuery selector to vanilla JS:

$('#someID').not('.classNameOne > div, .classNameTwo > div, div[class*="-something"] > div')

What I tried is using plain and simple this selector:

document.querySelectorAll("#someID:not(.classNameOne > div, .classNameTwo > div, div[class*="-something"] > div)");

This throws this error:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#someID:not(.classNameOne > div, .classNameTwo > div, div[class*="-something"] > div)' is not a valid selector.
at <anonymous>:1:10

Does one of you know a better way to replace this jQuery function?

Thanks!

wasddd_
  • 937
  • 2
  • 10
  • 19
  • 1
    not() allow only *simple* selector .. you cannot put that complex selector inside, still not supported (https://developer.mozilla.org/en-US/docs/Web/CSS/:not) – Temani Afif Jan 23 '19 at 10:32
  • https://stackoverflow.com/q/54311550/10283047 – misorude Jan 23 '19 at 10:33
  • _“This is what I want to achieve: […]”_ - please give a proper _verbal_ description of what you actually need, instead of just showing not working code. – misorude Jan 23 '19 at 10:34
  • I believe original jQuery code filters element by checking their parents. It is not supported in CSS due to affecting performance in really bad way – skyboyer Jan 23 '19 at 12:45

1 Answers1

1

Try this

document.querySelectorAll("#someID:not(.classNameOne) > 
div, .classNameTwo > div, div[class*=-something] > div ");
elraphty
  • 630
  • 6
  • 13