Reputation: 360

Delete the parent row not the child row in jQuery

This is the result of a datatable on a specific screen size. If all the columns are displayed, there is no problem deleting the row using

$(this).closest('tr').remove();

But when screen size became smaller, this will be the result. I cannot use the above code anymore. Now if I hit the button with the class deleteRow, I want to delete the tr with the class parent and its child (though the child row is not inside the parent row), not just the closest row. There could be many rows that have class parent so I just want to delete the row associates to the childs' row.

Upvotes: 0

Answers (4)

MDB

Reputation: 360

Just fixed my own issue. I added attribute to the parent row upon page loading.

<tr data_id = {{ $item->id }}>

this will make the tr unique so that I can call this later to delete the parent as well as the child row.

to delete the child where the button is placed

$(this).closest('tr.child').remove();

and added code to delete the parent row through attribute as selector.

$('[data_id="'+ row_id +'"]').remove();

so upon ajax success, I will call these two.

$tr.find('td').fadeOut(1000,function(){ 
    $(this).closest('tr.child').remove();
    $('[data_id="'+ row_id +'"]').remove(); 
});

Upvotes: 0

Duc Hong

Reputation: 1179

You can have a look at the samples I've put together here, I've tried to split into many cases that you can reference and re-apply to your project.

Let me know which's suitable for you and I can explain it clearer.

$(document).ready(function() {
  $('.delete-single-parent').each(function(index) {
    var $this = $(this);
    
    $this.click(function() {
      // $(this) = the element button clicked
      // Try row 1,3,5
      $(this).closest('tr.parent').remove();
      
      // Try row 2,4,6. Assuming "parent" is always a sibling of current `child`
      $(this).closest('tr.child').prev().remove();
    })
  });
  
  // This queries to the top (table), and find all parent rows to remove
  // Will remove row 1,3,5 only
  $('.delete-all-parents').click(function() {
    $(this)
       .closest('table')
       .find('tr.parent')
       .remove();
  })
})

table {
  border: 1px solid grey;
}
table tr:nth-child(odd) {
  background-color: #f3f3f3;
}
table tr td {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="parent">
    <td>
      <div>1</div>
      <button class="delete-single-parent">Delete Direct parent</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
  <tr class="child">
    <td>
      <div>2</div>
      <button class="delete-single-parent">Delete Parent (row 1)</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
  <tr class="parent">
    <td>
      <div>3</div>
      <button class="delete-single-parent">Delete Direct parent</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
  <tr class="child">
    <td>
      <div>4</div>
      <button class="delete-single-parent">Delete Parent (row 3)</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
  <tr class="parent">
    <td>
      <div>5</div>
      <button class="delete-single-parent">Delete Direct parent</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
  <tr class="child">
    <td>
      <div>6</div>
      <button class="delete-single-parent">Delete Parent (row 5)</button>
      <button class="delete-all-parents">Delete row 1,3,5</button>
    </td>
  </tr>
</table>

Upvotes: 0