How to hide full row of the table using Jquery

Question

I am building the system where there is a table with the anchor tag name original and copy in each row. Clicking on these anchor tag we can update into the database whether the item is original or copy using ajax. But i cannot hide the full row after one of the anchor tag is clicked. I am using Laravel-8 to Develop at backend. My view

<div class='container' style="margin-top:50px">
        <div class="row">
    
      

      <div class="input-group" style="margin:20px">
        <form >
          <table style="float:right">
            <th>
                <div class="form-outline">
                    <input type="search" id="form1" class="form-control" placeholder="Search" /></th>                        
                      <th><button type="button" class="btn btn-success" >
                      <i class="fas fa-search"></i>
                        </button></th>
          
  </form>
</div>


      <div class="table-responsive">

        <table class="table custom-table">
          <thead>
            <tr>
              <th scope="col">
                <label class="control control--checkbox">
                  <input type="checkbox" class="js-check-all"/>
                  <div class="control__indicator"></div>
                </label>
              </th>
              <th scope="col" >S.N</th>
              <th scope="col">LC NO</th>
              <th scope="col">Applicant</th>
              <th scope="col">Doc Value</th>
              <th scope="col">Doc Received date</th>
              <th scope="col">LC Type</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <?php $number = 1;?>
            @foreach($datas as $items)
              
            <tr>
              <th scope="row" style="padding:20px">
                <label class="control control--checkbox">
                  <input type="checkbox"/>
                  <div class="control__indicator"></div>
                </label>
              </th>
              <td>{{$number}}</td>
              <td>{{$items->lc_no}}</td>
              <td>{{$items->applicant}}</td>
              <td>{{$items->doc_value}}</td>
              <td>{{$items->rec_date}}</td>
              <td>{{$items->sight_usance}}</td>
              <td><a href="#" data-id="{{$items->id}}" class="original">Original</a></td>
              <td><a href="#" data-id="{{$items->id}}" class="copy">Copy</a></td>
            </tr>
            <?php $number++; ?>
            @endforeach
          
            
          </tbody>
        </table>
      </div>


    </div>

  </div>

Here is my jquery ajax function

$(".original").on('click', function(){

      var id=$(this).attr('data-id');
    $.ajax
({
  type: "GET",
  url: "orgupdate/"+id,

  success: function(response)
  {
     alert(response);
  }
});

});

Answer 1

Within the event handler this is the element the event occurred on. From that element use closest() to get a reference for the row.

$(".original").on('click', function() {
  // reference closest row
  var $row = $(this).closest('tr')
  var id = $(this).attr('data-id');
  $.ajax({
    type: "GET",
    url: "orgupdate/" + id,

    success: function(response) {
      alert(response);
      // after verify response value remove the row
      $row.remove()
    }
  });

});