如何在ajax成功时删除表格上的一行？

【问题标题】：How to remove a row on table on ajax success?如何在ajax成功时删除表格上的一行？
【发布时间】：2016-12-01 19:39:43
【问题描述】：

我的购物车中有一张产品表，其中包含删除按钮，该按钮通过 ajax 删除购物车中的产品。在 ajax 成功时，我想删除该表行，但是，我的代码不起作用。这是我的表格...

<form:form modelAttribute="cartProduct" 
           action="${pageContext.request.contextPath}/customer/removeFromCart"
           method="post">
    <form:input type="hidden" path="product.productId"
        value="${product.getProduct().getProductId()}" />
    <tr id="cartRow">
        <td><img class="card-img-top img-responsive"
            src="${pageContext.request.contextPath}/image?prodId=${product.getProduct().getProductId()}"
            alt="Card image cap" style="height: 120px; width: 100%;"></td>
        <td><h4 class="text-primary"
                style="padding: 0px; margin: 0px;">
                <a href="#">${product.getProduct().getName()}</a>
            </h4> <c:choose>
                <c:when test="${product.getStock() >= 50}">
                    <h6 class="text-success">In stock</h6>
                </c:when>
                <c:when
                    test="${product.getStock() < 50 && product.getStock() > 1}">
                    <h6 class="text-warning">Only ${product.getStock()}
                        left</h6>
                </c:when>
                <c:otherwise>
                    <h6 class="text-danger">No stock</h6>
                </c:otherwise>
            </c:choose>
            <button class="btn btn-warning btn-xs remove-button">Delete</button></td>
        <td><h4 class="text-danger"
                style="margin: 0px; padding: 0px;">&#8369;
                ${product.getProduct().getPrice()}</h4></td>
        <td>${product.getQuantity()}</td>
    </tr>
</form:form>

这是我的 ajax 代码...

$(document).ready(function(){

var form = $("form");
var url = form.attr("action");
var formMethod = form.attr("method");

form.submit(function(event) {

    event.preventDefault();

    var thisForm = this;

    $.ajax({

        url : url,
        data : $(this).serialize(),
        dataType : 'json',
        type : "POST",
        success : function(cartProduct) {
            $(thisForm).closest('tr').remove();
        }
    });
});

});

请帮忙...

【问题讨论】：

• 当您的标记无效时会发生此类问题。表格元素不能将表单作为有效子元素。
• 我编辑了我的代码。我将表单放在 标记内。如何隐藏该行？
• 那应该可以了。除了标记本身，您无需更改任何内容。现在考虑table>tr>td>form，您的代码tr 将在成功块执行后立即被删除。
• 另外我想添加.closest() jQuery 方法在 dom 树中向上遍历，这样应该可以工作。
• 代码将如何使用table>tr>td>form？对不起，我是 jquery 的初学者