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

            });
        });