Hiding parent div with javascript

[djsingle]

How do I hide a div with a nested label class using javascript? For example I have the code below and I want to hide all the div.nbd-xlabel-wrap with the nested class label.nbo-disabled-wrap.

<div class="nbd-xlabel-wrap">
                <div class="nbd-xlabel-value">
                    <div class="nbd-xlabel-value-inner" title="Titanium">
                        <input ng-change="check_valid();updateMapOptions('f1539147544370')" value="1" ng-model="nbd_fields['f1539147544370'].value" name="nbd-field[f1539147544370]" type="radio" id="nbd-field-f1539147544370-1" class="ng-pristine ng-untouched ng-valid ng-not-empty">
                        <label class="nbd-xlabel ng-isolate-scope nbo-disabled-wrap"  for="nbd-field-f1539147544370-1" nbo-disabled="!status_fields['f1539147544370'][1].enable" nbo-disabled-type="class">
                                                                                </label>
                    </div>
                </div>
                <label for="nbd-field-f1539147544370-1">
                    <b>Titanium</b>
                </label>
</div>

[James_Hibbard]

Hi,

There are a couple of methods to hide all div.nbd-xlabel-wrap elements if they contain a nested label.nbo-disabled-wrap.

Using JavaScript:

document.querySelectorAll('div.nbd-xlabel-wrap').forEach((wrapper) => {
  if (wrapper.querySelector('label.nbo-disabled-wrap')) {
    wrapper.style.display = 'none';
  }
});

This will iterate through all div.nbd-xlabel-wrap elements and check if they contain a label element with the nbo-disabled-wrap class. If so, the div will be hidden by setting its display style to none.

Using CSS:

div.nbd-xlabel-wrap:has(label.nbo-disabled-wrap) {
  display: none;
}

See: https://caniuse.com/css-has

---

However, I see that you are using AngularJS, so depending on what you are intending to do, it might be that you are fighting the framework and there is a better way to do this. For example using AngularJS directives or conditional classes based on scope variables to handle visibility and style changes.

[djsingle]

@James_Hibbard

div.nbd-xlabel-wrap:has(label.nbo-disabled-wrap) {
  display: none;
}

Ohhh wow! I didn’t know you can address parent div using CSS. Thanks!