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

由您决定。

从表中删除行而不刷新页面

1 个答案: