Jquery ajax成功后删除动态div元素和子元素

我是jquery和ajax新手，上一次我在使用datatables，但后来我尝试使用div显示我的项目以获得更好的视图，但是在ajax成功后，我很难删除div元素

顺便说一下，我正在使用asp.net的mvc5

请帮助我，并提前向你们所有人表示感谢

若你们对我的代码有任何建议或修改，请告诉我

这是我的div元素。我通过foreach循环遍历模型，因此我的div是动态的

    <div id="div_table" class="container">
        <div class="row">
            @foreach (var food in Model)
            {

//I want to delete this div after success

                <div id="@food.food_ID" class="col-lg-3">
                    <div class="thumbnail" style="height:150px;">
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            @food.foodName
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="col-md-4">
                                <button class="btn-sm btn-info">Edit</button>
                            </div>
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4">
                                <button class="btn-sm btn-danger btn-js-delete" data-customer-id="@food.food_ID">Delete</button>
                            </div>

                        </div>
                        <div class="col-lg-6">

                        </div>
                    </div>
                </div>
                count++;
                if (count == 4)
                {
                    count = 0;
                    @Html.Raw("</div>")@:<div class="row" style="margin-top: 30px">
                }
            }
        </div>
    </div>

@foreach（模型中的食物变量）
{
//我想在成功后删除此div
@food.foodName
编辑
删除
计数++；
如果（计数=4）
{
计数=0；
@Html.Raw（“”@）：
}
}

我的jquery是ajax

 @section scripts{
        <script>
            $(document).ready(function () {
                $("#div_table").on("click", ".btn-js-delete", function () {
                    var button = $(this);

                    bootbox.confirm("Are you sure you want to delete the selected food", function (result){
                        if (result)
                        {
                            $.ajax({
                                type: "POST",
                                url: "/AdminFood/Delete/" + button.attr("data-customer-id"),
                                success: function () {
                                    button.parent("div").remove();
                                    debugger
//I dont know how to implement in div
                                    $("#" + button.attr("data-customer-id")).remove(); 
                                    bootbox.alert("Food Successfully Deleted");
                                }
                            });
                        }
                    });
                });
            });
        </script>

        @Scripts.Render("~/bundles/bootBox-js")
    }

@节脚本{
$（文档）.ready（函数（）{
$（“#div_table”）。在（“单击“，”.btn js delete“，函数（）{
var按钮=$（此按钮）；
bootbox.confirm（“您确定要删除所选食物吗”），函数（结果）{
如果（结果）
{
$.ajax({
类型：“POST”，
url:“/AdminFood/Delete/”+button.attr（“数据客户id”），
成功：函数（）{
button.parent（“div”）.remove（）；
调试器
//我不知道如何在div中实现
$（“#”+button.attr（“数据客户id”）.remove（）；
bootbox.alert（“食品已成功删除”）；
}
});
}
});
});
});
@Scripts.Render（“~/bundles/bootBox js”）
}

按钮。父级（'div'）

将获得第一个父级，而这不是您想要的

我会在要删除的div中放入一些类，例如“deletable”

<div id="@food.food_ID" class="col-lg-3 deletable">

---

重复的

id

属性是无效的html。改用类名和相对选择器

button.closest('div.deletable')