how to get parent div from element inside?

Question

I am getting the dynamic input id custom_field_42, and i need to get the form-group div to change display to block from none, how can i do that?

<div class="form-group row g-mb-5" style="display:none;">
  <label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
  
  <div class="col-sm-10">
    <input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
  </div>
</div>

I have tried this, it doesn't work.

$('#custom_field_42').closest('.form-group').show()

---

Community edit...

Actually, this works:

$('#custom_field_42').closest('.form-group').show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group row g-mb-5" style="display:none;">
  <label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>

  <div class="col-sm-10">
    <input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
  </div>
</div>

Answer 1

You can use Element.closest to find the first parent element which matches a selector, which, in our case, is .row:

const input = custom_field_42;
input.closest('.row').style.display="block";

<div class="form-group row g-mb-5" style="display:none;">

  <label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>

  <div class="col-sm-10">

    <input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">

  </div>
</div>