Удаление строки из таблицы без обновления страницы

У меня есть страница, где отображается список заказов. Я пытаюсь удалить строку таблицы, когда пользователь нажимает кнопку, но он просто удаляет первую строку, и когда я пытаюсь удалить вторую или третью строку, ее нельзя удалить. Может ли кто-нибудь помочь мне или указать правильное направление? Заранее спасибо.

Вид:

<table id = "Tableitem" class = "table">
    <tbody>
    @foreach (var item in Model)
    {
    <tr>
        <td>
            <div class = "product-title">
                <a href = "/Main/Produktdetaljer/@[email protected]">
                    @Html.DisplayFor(modelItem => item.ProductName)
                </a>
            </div>
        </td>
        <td>
            <ul>
                <li>
                    <div class = "base-price price-box"> 
                        <span class = "price"> 
                            @Html.DisplayFor(modelItem => item.Price) 
                        </span> 
                    </div>
                </li>
            </ul>
        </td>
        <td class = "QuantityOfProduct@(item.ProductId)">
            @Html.DisplayFor(modelItem => item.Quantity)
        </td>
       <td>
       <i data-id = "@item.ProductId" class = "fa fa-trash cart-remove-item removeproduct"></i>
      </td>
    </tr>
    }
    </tbody>
</table>

Javascipt:

$("i.removeproduct").click(function (e) {
    e.preventDefault();

    var $this = $(this);
    var productId = $(this).data("id");
    var url = "/cart/RemoveProduct";

    $.get(url, { productId: productId }, function (data) {
         // i used .load for not refreshing page
        $('#Tableitem').load(document.URL + ' #Tableitem');

        });         
});