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

Question

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

Просмотр:

<table id="Tableitem" class="table">
    <tbody>
    @foreach (var item in Model)
    {
    <tr>
        <td>
            <div class="product-title">
                <a href="/Main/Produktdetaljer/@item.ProductId?proid=@item.ProductId">
                    @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');

        });         
});

Answer 1

попробуйте

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

или

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

Вам решать.