Hide closest row anchor tag jquery

user_3653474 0
Viewed 158

I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.

I'm using the following code to hide it:

jQuery(document).on('change', '.subject', function(e) {
  var nearest_row = $(this).closest('div.row');
  var elem = $(nearest_row).closest(".add_marks");
  elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Class</h2>
      <div class="form-line focused">
        <input type="text" name="name" class="form-control" required="">
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <select name="subject_name" class="form-control subject" required="" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Maths</option>
        <option value="2">Science</option>
      </select>
    </div>
  </div>
</div>
<div class="col-sm-1">
  <div class="form-group">

    <div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="add_marks btn btn-primary"><i class="material-icons">add</i>Add Marks</a></div>
  </div>
</div>

html jquery javascript
2 Answers

You have to get the next div and find the a link, then hide it.

  var nearest_row = $(this).closest('div.row');

gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.

You can also do next('div') instead of getting the next element to find the next div.

jQuery(document).on('change', '.subject', function(e) {
    var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
    //console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Class</h2>
      <div class="form-line focused">
        <input type="text" name="name" class="form-control" required="">
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <h2 class="card-inside-title">Subject</h2>
      <select name="subject_name" class="form-control subject" required="" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Maths</option>
        <option value="2">Science</option>
      </select>
    </div>
  </div>
</div>
<div class="col-sm-1">
  <div class="form-group">

    <div class="col-xs-1 col-sm-7 col-md-1"><a href="javascript:void(0);" class="add_marks btn btn-primary"><i class="material-icons">add</i>Add Marks</a></div>
  </div>
</div>

user_46322390

Here is Working code example run it with js (shortcut: ctrl + enter)

...want to hide the anchor tag with class "add_marks" which is inside the same row.

So I have moved that button inside row. Using .col* as direct child of .row is proper way of using bootstrap grid.

Used the following jQuery considering your requirement.

jQuery(document).on('change', '.subject', function (e) {
  $(this)
    .parents('.row')
    .find('.add_marks')
    .hide();
});
user_50555030
Related