Question 421349 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Hide complete field(label and options) based on the id

I am trying to hide the below question(both title and options) using the id "fe3739" using javascript. When I try to hide using the id(fe3739), it only hides options. I know there is one more id "formElement64" which can be used for hiding the complete question but my requirement was to hide using the id "fe3739".

$("#fe3739").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="grid-layout-col">
    <div class="layout-col col-sm-12 col-xs-12">
      <div id="formElement64" class="field-style form-element-layout row">
        <div style="text-align:left;" class="col-sm-12 col-xs-12">
          <label class="elq-label " for="fe3739">How would you describe your data domain?</label>
        </div>
        <div class="col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-xs-12">
              <div class="field-control-wrapper">
                <select class="item-select" id="fe3739" name="dropdownMenu17" style="width:100%;" data-value="">
                  <option value="">Please Select</option>
                  <option value="Fraud &amp; Risk">Fraud &amp; Risk</option>
                  <option value="Marketing">Marketing</option>
                  <option value="Product">Product</option>
                  <option value="Sales">Sales</option>
                  <option value="Other">Other</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The below one just hides the options not the complete question including title

$("#fe3739").hide();
Tags:

2

Answers


  1. 0

    Define "the complete question". Are you looking to hide the top-level <div> that you’re showing? You can select the closest matching element from your target element. For example:

    $('#fe3739').closest('div.grid-layout-col').hide();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="grid-layout-col">
   <div class="layout-col col-sm-12 col-xs-12">
      <div id="formElement64" class="field-style form-element-layout row">
         <div style="text-align:left;" class="col-sm-12 col-xs-12">
            <label class="elq-label " for="fe3739">How would you describe your data domain?</label>
         </div>
         <div class="col-sm-12 col-xs-12">
            <div class="row">
               <div class="col-xs-12">
                  <div class="field-control-wrapper">
                     <select class="item-select" id="fe3739" name="dropdownMenu17" style="width:100%;" data-value="">
                        <option value="">Please Select</option>
                        <option value="Fraud &amp; Risk">Fraud &amp; Risk</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Product">Product</option>
                        <option value="Sales">Sales</option>
                        <option value="Other">Other</option>
                     </select>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
    Login or Signup to reply.
  2. 0

    Hiding a form field will still include the name and possible value in the form data. Instead use the disable property on the input element and create a CSS selector that hides the element (and the question in this case).

    In this case the CSS selector div[id^="formElement"]:has(select:disabled) will be applied to all div elements that has a id with the prefix value formElement (attribute selector [attr^=value]) and has a child select element that is disabled.

    $("#fe3739").prop('disabled', true);
    div[id^="formElement"]:has(input:disabled),
div[id^="formElement"]:has(select:disabled) {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="grid-layout-col">
    <div class="layout-col col-sm-12 col-xs-12">
      <div id="formElement64" class="field-style form-element-layout row">
        <div style="text-align:left;" class="col-sm-12 col-xs-12">
          <label class="elq-label " for="fe3739">How would you describe your data domain?</label>
        </div>
        <div class="col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-xs-12">
              <div class="field-control-wrapper">
                <select class="item-select" id="fe3739" name="dropdownMenu17" style="width:100%;" data-value="">
                  <option value="">Please Select</option>
                  <option value="Fraud &amp; Risk">Fraud &amp; Risk</option>
                  <option value="Marketing">Marketing</option>
                  <option value="Product">Product</option>
                  <option value="Sales">Sales</option>
                  <option value="Other">Other</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search