Question

我是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>

我的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")
    }

Answer 1

button.parent('div')将获得第一个父母，而这不是你想要的。

我会在要删除的div中添加一些类，例如'deletable'

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

然后代替button.parent('div')你做这样的事情：

button.closest('div.deletable')

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

1 个答案: