删除 jQuery 中的父行而不是子行

Question

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.

Answer 1

I want to delete the tr with the class parent , not just the closest row.

Then include that extra info .parent in the selector like so:

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

Answer 2

Try

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

Answer 3

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>

Answer 4

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(); 
});