If / Else statement in JQuery

Question

How to modify this line into saying that if interview_schedule_id is empty; it stays hidden, and if its not empty; it shows.

$('.interview_schedule-div'+program_input.data('id')).removeClass('hide');

The rest of the script:

function getInterviewSchedule(element)
{
    var program_input = $(element);
    var intake_id = $("[name='intake_id']").val();
    var campus_id = $('[name="program[' + program_input.data('id') + '][campus_id]"]').val();
    var program_id = $('[name="program[' + program_input.data('id') + '][program_id]"]').val();

    if(program_id != '' && program_id != null){
        $.ajax({
          type: 'GET',
          url: '{{ route("campus_program.interview_schedule") }}',
          data: {
            intake_id: intake_id,
            campus_id: campus_id,
            program_id: program_id
          },
          success: function (data) {
            var select_data = [];

            $.each(data, function(i, object) {
              select_data.push({id:i, text:object});
            });
            $('.interview_schedule-div'+program_input.data('id')).removeClass('hide');
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"').select2({
              data: select_data,
              placeholder: "Please Select",
              allowClear: true
            });
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"]').val('').trigger('change');

            @if(!empty($intake_select))
            if (intake_id == {{ $intake_select }})
            {
                @for ($i = 0; $i < $form_setting['total_program']['show']; $i++)
                @if (!empty($student_program[$i]->interview_schedule_id))
                <?php $interview_schedule_id = $student_program[$i]->interview_schedule_id; ?>
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val({{$interview_schedule_id}}).trigger('change');
                @else
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val('').trigger('change');
                @endif
                @endfor
            }
            @endif
          }
        });
    }
}

and the HTML:

<div class="form-group interview_schedule-div{{$i}} hide">
      <label class="col-lg-2 control-label">{{ msg('lbl_interview_schedule') }}</label>
      <div class="col-lg-6">
          {!! Form::dropdown('program['.$i.'][interview_schedule_id]', ['' => ''], @$student_program[$i]->interview_schedule_id, [
            'data-id' => $i,
            'class' => 'select2-form program-input'
          ]) !!}
      </div>
</div>

Thanks,

Answer 1

You can use jquery "toggleClass". If the second parameter of toggleClass method resolves to "truthy" then it adds the class "hide" otherwise it removes.

I am assuming "interview_schedule_id" is html element, if that's the case you can check it's existence with $('#interview_schedule_id').length,

$('.interview_schedule-div'+program_input.data('id').toggleClass("hide",$('#interview_schedule_id').length);

Answer 2

You can use jQuery methods show() and hide() like this:

let div = $('.interview_schedule-div' + program_input.data('id'));
div.children().length > 0 ? div.show() : div.hide();

Note: Both examples below have the same code. One example has the div with children elements and the other has an empty div. Also, the div class interview_schedule-div... is here written as interview_schedule-div1 so we can access it for testing.

---

Examples:

 let div = $('.interview_schedule-div1'); div.children().length > 0 ? div.show() : div.hide();

 .interview_schedule-div1 { padding: 20px; background-color: #09f; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group interview_schedule-div1 hide"> <label class="col-lg-2 control-label">Schedule</label> <div class="col-lg-6"></div> </div>

 let div = $('.interview_schedule-div1'); div.children().length > 0 ? div.show() : div.hide();

 .interview_schedule-div1 { padding: 20px; background-color: #09f; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group interview_schedule-div1 hide"> </div>