Obtener valor de data-id de un tr al hacer clic en un enlace

[RSmith]

Hola a todos, estoy teniendo un problema al querer obtener el valor de un "data-id" de un tr al hacer clic en un enlace. Teniendo esta tabla:

Código PHP:

  <table cellspacing="0" class="shop_table cart">
    <tbody>
        @foreach ($products as $product)
            <tr data-id="{{ $product->id }}" class="cart_table_item">
                <td class="product-remove">
                    <a title="Eliminar este producto" class="remove" href="#">
                        <i class="fa fa-times"></i>
                    </a>
                </td>
                <td class="product-thumbnail">
                    <img width="100" height="100" alt="" class="img-responsive" src="{{ asset('img/products/product-1.jpg') }}">
                </td>
                <td class="product-name">
                    {{ $product->name }}
                </td>
                <td class="product-price">
                    <span class="amount">{{ $product->price }}</span>
                </td>
                <td class="product-quantity">
                    {{ $product->qty }}
                </td>
                <td class="product-subtotal">
                    <span class="amount">{{ $product->price * $product->qty }}</span>
                </td>
            </tr>
        @endforeach
    </tbody>
</table> 
   

Lo que yo necesito es recuperar el valor del "data-id" del tr. Estoy tratando de hacerlo de la siguiente manera:

Código HTML:

$(document).ready(function() {
    $('a.remove').click(function() {

        var row  = $(this).parents("tr");
        var id   = row.data("id");

        alert(id);
    });
});

y por alguna razon en el alert me aparece "undefined". Lo raro es que lo estoy ejecutando desde aca: https://jsfiddle.net/dpab0npw/4/ y funciona bien. Me podrian ayudar ?