jQuery用ajax Post方法追加和刪除元素

Question

我想添加一個包含刪除按鈕的div列表元素，並在添加後刪除它。當我嘗試在添加該div後立即刪除該div元素時，它將其從html中刪除，但不會從服務器端刪除。刷新頁面時，我看到該元素，並且可以在刷新頁面後將其刪除。我的代碼如下。我使用ajax.post方法發送服務器，並使用jquery post方法刪除。

$(function() { 
    $("button#formDepartment").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "addsomething.php", 
      data: $('form#newDepartment').serialize(), 
      success: function(data) { 
       document.getElementById("newDepartment").reset(); 
       idDep = data; 

      }, 
      error: function(){ 
       alert("failure"); 
      } 
     }); 

     var departmentName = $('#nameDepartment').val(); 

     var newDepartmentElem = 
      ' <div class="list-group-item" data-plugin="editlist"> \ 
      <div class="list-content"> \ 
       <span class="list-text">' + departmentName + '</span> \ 
       <div class="item-actions"> \ 
       <span class="btn btn-pure btn-icon" id="deleteDepartment" data-delete-id="' + idDep + '" ><i class="icon wb-trash" aria-hidden="true"></i></span> \ 
       </div> \ 
      </div> \ 
      </div>'; 

     $(newDepartmentElem).hide().appendTo("#departmentList").slideDown('slow'); 

    }); 

    $(document).on('click', 'span#deleteDepartment', function() { 
     var deleteId = $(this).data("delete-id"); 
     var removeItem = $(this).closest('.list-group-item'); 
     bootbox.dialog({ 
      message: "this department will be deleted.", 
      title: "Delete department", 
      buttons: { 
       success: { 
       label: "Delete", 
       className: "btn-success", 
       callback: function() { 
        $.post("deletesomething.php", 
        {itemId : deleteId, deleteItem : "department"} 
        ); 
        removeItem.slideUp(600); 
        toastr.error("Department deleted."); 
        console.log(deleteId); 
       } 
       }, 
       danger: { 
       label: "Cancel", 
       className: "btn-danger", 
       callback: function() { 
       } 
       } 
      } 
     }); 
    }); 
}); 

Answer 1

如果你河畔返回的id是數據它的自我（idDep = data;），所有你需要做的就是把所有的代碼Ajax請求裏面，因爲外界的請求像你一樣將設置data-delete-id來回刪除跨度undefined（您可以通過瀏覽器檢查檢查），所以，你所要做的就是把所有的代碼如下成功函數內部：

$("button#formDepartment").click(function(){ 
    $.ajax({ 
     type: "POST", 
     url: "addsomething.php", 
     data: $('form#newDepartment').serialize(), 
     success: function(data) { 
      document.getElementById("newDepartment").reset(); 
      idDep = data; 

      var departmentName = $('#nameDepartment').val(); 

      var newDepartmentElem = 
       ' <div class="list-group-item" data-plugin="editlist"> \ 
       <div class="list-content"> \ 
        <span class="list-text">' + departmentName + '</span> \ 
        <div class="item-actions"> \ 
        <span class="btn btn-pure btn-icon" id="deleteDepartment" data-delete-id="' + idDep + '" ><i class="icon wb-trash" aria-hidden="true"></i></span> \ 
        </div> \ 
       </div> \ 
       </div>'; 

      $(newDepartmentElem).hide().appendTo("#departmentList").slideDown('slow'); 
     }, 
     error: function(){ 
      alert("failure"); 
     } 
    }); 
});