Multiple selectors to exclude in querySelectorAll

JavaScript
1

Below is label.

<label style="vertical-align: middle; cursor: pointer;">Terrain</label>

It is nested in following structure (see label at the end):

div.event-section div.googlemaps div#googleMap6512 div div.gm-style div.gmnoprint div.gm-style-mtc div div label

Problem:
I want to exclude this label in my Javascript together with the label from another div.widget_small and I tried this.

var arrInp = document.querySelectorAll("label:not(.googlemaps):not(.widget_small)");

This did not work. I think I picked the wrong selector or… ?

3

@camperextraordinaire - Hi, sorry, I develop on my localhost:4000 only now.

How can I clarify my problem better?

5

@camperextraordinaire - I simplified my question. Its problematic to post the whole code for this.
I hope my edit helps to clarify. Thanks on forehand.

7

@camperextraordinaire - So sorry, but I tried to simplify my question in such a way that hopefully someone can help me. The question in itself and the code might be clear enough…

9

@camperextraordinaire - Fair enough and I appreciate that. I myself just started developing since about a year and I try to keep things short, simple and easy. My above problem, in my modest opinion, is about me not being able to grab the correct selector. And second, not able to put a 2 X NOT label in the javascript exclusion. So more or less a syntax issue. Anyways, lets hope it gets resolved before Christmas, these little code mishaps are always the most nasty and annoying… :frowning:

10 
<div class="gm-style-mtc">
<label style="vertical-align: middle; cursor: pointer;">Hello</label>
</div>

I am trying to exclude above label in below code:

document.querySelectorAll("label:not(.label)");

How to exclude based on “label style” only?

Alternatively, the div for the label style is “.gm-style .gm-style-mtc label” (= CSS selector), but doing the following also did NOT work:

document.querySelectorAll("label:not(.gm-style .gm-style-mtc)");
11

So your document.querySelectorAll("label:not(.label)"); says “select any label without the css class ‘label’ applied to it.” I don’t think that’s what you intend.

In your second example, you are saying “select any label without the class 'gm-style” or ‘gm-style-mtc’." Which doesn’t apply to the given label you want to exclude.

In short, you have no direct hook to this label. You could exclude a style, I think, like document.querySelectorAll(label:not([style="vertical-align:middle"]); but that may filter more than you intend…

13

@snowmonkey - sorry for confusion, the label is found like this…

<div class="gm-style-mtc">
<label style="vertical-align: middle; cursor: pointer;">Hello</label>
</div>

You are right, with the style code in the filter, it filters a bit too much to my liking… )
How to exclude the label with .div reference then?

15

are you trying to not select all labels within the .gm-style-mtc?

Yeah, what @camperextraordinaire sez. :wink:

17

At a guess, try something like this:

let myEl = document.querySelectorAll(".gm-style-mtc :not(label)")

console.log(myEl);

Wait. That isn’t right either. I don’t think you’ll be able to select them that way. How about, instead, selecting all the labels, select the containers, then see if that container contains the label?

let myExclusiveEl = document.querySelectorAll(".gm-style-mtc");
let myEls = document.querySelectorAll("label");


myEls = [...myEls].filter(child => {
  let containedByExclusionNode = [...myExclusiveEl].filter(parent => {
    if (parent.contains(child)) {
      return true
    } else {
    return false;
    }
  })
  
  if (containedByExclusionNode.length > 0) {
    return true;
  } else {
    return false
  }
})

console.log(myEls);
18

I think I need to ice my brain after that logic funfest.

20

@camperextraordinaire - Hi Randell, nice to see you again… :slight_smile:
Yes, you are right, I want to exclude the specified label.

I am playing around a bit with @snowmonkey code, but no luck yet. I keep trying.

Thanks for your efforts @snowmonkey - dont run out of ice, there is more to come … :slight_smile:

22

@snowmonkey
More simplified, I try to pinpoint it down to where the issue lies exactly…

<div class="alpha">
   <div class="beta">
      <label style="color:red; font-size: 12px;">Hello</label>
   </div>
</div>

I want to exclude (= not include), the above label (its the only one that has label style). This includes it obviously:

document.querySelectorAll(.alpha .beta label");

Now how to exclude it? I want to select all my labels with label class but this one that I want to exclude only has a label style. So how to get the label style one OUT of my ´querySelectorAll`?

24

@camperextraordinaire - You nailed it… that was it! I cant thank you enough, been struggling with this for days (… as you know)… awesome, thanks a lot, really, this made my day!!! :slight_smile: :slight_smile: :slight_smile: