Skip to content

How to hide or adding an additional class for checkout component shipping form custom field in magento 2?

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 &amp;&amp; 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