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

我是新的jquery和ajax和im上次在datatables工作，但后来我试图显示我的项目使用div来获得更好的视图，但后来我有在Ajax成功后，很难删除div元素。在ajax成功后删除动态div元素和子女

使用asp.net的mvc5

请帮我和推进方式IM谢谢各位

如果你们有我的代码更简单的方法建议或修改，请让我知道。

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

来源

2017-07-30 Itsumo Kokoro

重复'id'属性无效的HTML。改为使用类名和相对选择器 –

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

我会把一些类，你要删除的DIV，例如“可删除”

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

，而不是button.parent('div')那么你做这样的事情：

button.closest('div.deletable')

来源

2017-07-30 14:44:15

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

回答

相关问题