Target parent div, but not if it includes a nest class

Question

I want to target a parent div using document.querySelectorAll. But not if the div contains a nested div, with a particular class.

For example, in the example below, I want to grab the parent first and last floatContainer divs. But not this second, because it contains dropdown-container class.

document.querySelectorAll(".ej-form-field:not([dropdown-container])") does not seem to be working.

console.log(document.querySelectorAll(".ej-form-field:not([dropdown-container])"))

<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">First name</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- NOT THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Last name</label>
  <div class="dropdown-container input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

<!-- GRAB THIS -->
<div id="floatContainer" class="ej-form-field">
  <label for="floatField">Telephone</label>
  <div class="input-container">
    <input id="floatField" class="ej-form-field-input-textbox" type="text">
  </div>
</div>

Does this answer your question? [CSS negation pseudo-class :not() for parent/ancestor elements](https://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements) — CBroe, Jun 04 '21 at 10:29

score 1 · Accepted Answer · answered Jun 04 '21 at 10:26

1

this code solve your problem.

console.log(document.querySelectorAll(".ej-form-field>div:not(.dropdown-container)"))

answered Jun 04 '21 at 10:26

Ali Ehyaie

1,116
3
13
27

This wouldn't grab the `.ej-form-field` itself but rather any div inside it which is a direct child but not a .dropdown-container. – Colandus Jun 04 '21 at 10:30

score 1 · Answer 2 · answered Jun 04 '21 at 10:30

1

you must target a specific class not an attribute, ie:

document.querySelectorAll(".ej-form-field:not(.dropdown-container))

answered Jun 04 '21 at 10:30

Raphael

770
1
7
23

score 0 · Answer 3 · answered Jun 04 '21 at 12:44

0

I also found this option, which seemed to work as well:

document.querySelectorAll("div.ej-form-field + :not(.dropdown-container)")

answered Jun 04 '21 at 12:44

Reena Verma

1,617
2
20
47

Target parent div, but not if it includes a nest class

3 Answers3