How to remove tr using jquery selector?

Question

When I click remove button the data is removed but I can't remove the tr that is shown in table.

<tr>

<td>name</td>
<td><button id="removebutton" data-id="?">Remove</button></td>
</tr>

I want to select tr that is in the top and remove it from the ajax response.

I have tried:

$("#removebutton).on("click",function(){
  success: function(res){
  $(this).parents("tr").remove(); //this doesn't work
  }
});

what is success function come from it's inside ajax – jvk Nov 03 '19 at 07:26 — jvk, Nov 03 '19 at 07:26

Nidhin Joseph · Accepted Answer · 2019-11-03T07:37:14.403

1

Try using arrow function instead. This makes sure that the scope is kept to the click event rather than the success()

$("#removebutton").on("click", function() {
  .....
  success: (res) => {
    $(this).parent().remove(); 
  }
  ....
});

edited Nov 03 '19 at 07:37

answered Nov 03 '19 at 07:29

Nidhin Joseph

@Nidhin Joseph would you mind explaining me why arrow function worked? not with normal function? – A4family Nov 03 '19 at 07:36
@A4family because you clicked on the exact element. Try to remove two rows :D – nakov Nov 03 '19 at 07:37
@charlietfl he has an ajax inside. the success comes from that. – Nidhin Joseph Nov 03 '19 at 07:37
@A4family [This link](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable) can help you understand better with arrow functions and normal function. – Nidhin Joseph Nov 03 '19 at 07:38
1

Can also use `context` option of `$.ajax` with a regular function ... `context:this` – charlietfl Nov 03 '19 at 07:40

nakov · Answer 2 · 2019-11-03T07:30:27.617

0

You can use either:

$(this).parent().remove();

// or

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

Let me know if it works :)

EDIT

I am looking forward to know why I got a negative vote :)

You cannot use the SAME ID on multiple rows..

<button class="removebutton" data-id="?">Remove</button>

then this $("#removebutton). should be $(".removebutton").

And you are missing closing " above in your selector.

edited Nov 03 '19 at 07:30

answered Nov 03 '19 at 07:26

nakov

it doesn't work – A4family Nov 03 '19 at 07:28
@A4family if you have multiple rows you cannot use ID on it, it should either be a class, or add `onclick` attribute on the button itself – nakov Nov 03 '19 at 07:29
yes i have multiple rows – A4family Nov 03 '19 at 07:29
take a look at my edit then – nakov Nov 03 '19 at 07:30
Thank you for the response!! I used arrow function and it worked. – A4family Nov 03 '19 at 07:36
Yes, because you deleted just one row :) try on another. With ID it won't work. Still my answer above is straight to the non-working line.. – nakov Nov 03 '19 at 07:37

2 Answers2