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は、あなたがしなければならないすべては、AJAXリクエスト内のすべてのコードを入れている、データも自己（idDep = data;）であることをシュルならundefinedに削除スパンあちこちdata-delete-id（ブラウザインスペクタで確認できます）、だから、あなたがしなければならないすべては、以下のように成功関数内のすべてのコードを入れている：

$("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"); 
     } 
    }); 
});