Why does JQuery closest().remove() is not working?

Question

I'm trying to remove row after successful ajax call. Ajax works like intended, but its success function doesn't work. I searched other similar questions, but couldn't find solution for my problem. I tried debugging it checking if $(this).closest("tr") is set properly but, I only managed to check that it's not null. I'm not sure if the error is in closest() or remove().

HTML:

                        <tbody id="userlist">
                            @foreach ($users_with_permission as $user)
                                <tr>                                      
                                    <td><span>{{ $user['name'] . ' ' . $user['surname'] . '-[' . $user['companies']['name'] . ']-[' . $user['branches']['name'] . ']-[' . $user['departments']['name'] . ']' }} </span></td>
                                    <td>
                                        <form class="removeUserPermission">
                                            <input type="hidden" name="id" value="{{ $user['id'] }}">
                                            @foreach ($selected_permissions as $permission)
                                                <input type="hidden" name="permissions[]"  value="{{ $permission }}">
                                            @endforeach
                                            <button class="btn btn-danger" type="submit">X</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

JS:

$('#userlist').on('submit','.removeUserPermission' ,function(e) {
            e.preventDefault();
            $.ajax({
                type: "post",
                url: "{{ route('role.revokePermission') }}",
                data: $(this).serialize(),
                success: function(response) {
                    $(this).closest("tr").remove();     
                }

            });
        });

Can you explain what `tr` you want to remove? You have many `tr`s depending on the number of permissions. And also submit handler should be applied to a `form`, not to a `body` tag. I can see a lof of misunderstandings, so I'm nit sure what you actually want to achieve — Reflective, Oct 12 '21 at 08:36
@Deepak Kotian answered my question already. Button is a child of form and I want to delete the tr which is parent of form. — Hiddennord, Oct 12 '21 at 08:47

score 1 · Accepted Answer · answered Oct 12 '21 at 08:27

Try the below code

$('#userlist').on('submit','.removeUserPermission' ,function(e) {
            e.preventDefault();
            var ths = $(this);
            $.ajax({
                type: "post",
                url: "{{ route('role.revokePermission') }}",
                data: $(this).serialize(),
                success: function(response) {
                    ths.parent('tr').remove();     
                }

            });
        });

Why does JQuery closest().remove() is not working?

1 Answers1