I am using Eadesigndev_RomCity module to populate an area dropdown on checkout. This field is rendering like below code. I need to hide it using display none in some situation.
Since this parent div also dosen’t have a class or id how can i do it?
<div class="field _required _error" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" name="" style="">
<label class="label" data-bind="attr: { for: element.uid }" for="HNF0PC6"><!-- ko if: element.label --><span data-bind="i18n: element.label">Area</span><!-- /ko --></label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl -->
<select class="select" data-bind="
attr: {
name: inputName,
id: uid,
disabled: disabled,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
placeholder: placeholder
},
hasFocus: focused,
optgroup: options,
value: value,
optionsCaption: caption,
optionsValue: 'value',
optionsText: 'label',
optionsAfterRender: function(option, item) {
if (item && item.disabled) {
ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
}
}" name="" id="HNF0PC6" aria-required="true" aria-invalid="true" aria-describedby="error-HNF0PC6">
<option data-title="Select Locality" value="">Select Locality</option>
<option data-title="Ajman Free Zone" value="Ajman Free Zone">Ajman Free Zone</option
<option data-title="Ajman Industrial" value="Ajman Industrial">Ajman Industrial</option>
<option data-title="Al Alia" value="Al Alia">Al Alia</option>
<option data-title="Al Azara" value="Al Azara">Al Azara</option>
<option data-title="Al Bahya Ajman" value="Al Bahya Ajman">Al Bahya Ajman</option
</select>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() --><!-- /ko -->
<!-- ko if: element.tooltip --><!-- /ko -->
<!-- ko if: element.notice --><!-- /ko -->
<!-- ko if: element.error() -->
<div class="field-error" data-bind="attr: { id: element.errorId }" generated="true" id="error-HNF0PC6">
<span data-bind="text: element.error">This is a required field.</span>
</div>
<!-- /ko -->
<!-- ko if: element.warn() --><!-- /ko -->
</div>
checkout_index_index.xml file is below.
e<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="city_id" xsi:type="array">
<item name="component" xsi:type="string">Eadesigndev_RomCity/js/form/element/city-select</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
</item>
<item name="label" xsi:type="string" translate="true">Area</item>
<item name="sortOrder" xsi:type="string">110</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
<item name="city" xsi:type="array">
<item name="component" xsi:type="string">Eadesigndev_RomCity/js/form/element/city</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/form/field</item>
</item>
<item name="sortOrder" xsi:type="string">110</item>
</item>
<item name="vat_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">65</item>
</item>
</item>
</item>e