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

我想添加一个div列表元素，其中包括delete按钮，并在添加后将其删除。当我尝试在添加那个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() {
                }
              }
            }
        }); 
    });
});

$（函数（）{
$（“按钮#表单部门”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“addsomething.php”，
数据：$（'form#newDepartment'）。序列化（），
成功：功能（数据）{
document.getElementById（“newDepartment”）.reset（）；
idDep=数据；
},
错误：函数（）{
警报（“故障”）；
}
});
var departmentName=$（'#nameDepartment'）.val（）；
var newDepartmentElem=
'  \
\
“+部门名称+”\
\
\
\
\
';
$（newDepartmentElem）.hide（）.appendTo（“#departmentList”）.slideDown（'slow'）；
});
$（文档）。在（'click'，'span#deleteDepartment'，函数（）上{
var deleteId=$（this）.data（“delete id”）；
var removietem=$（this）.closest（'.list-group-item'）；
bootbox.dialog({
消息：“此部门将被删除。”，
标题：“删除部门”，
按钮：{
成功：{
标签：“删除”，
类名：“btn成功”，
回调：函数（）{
$.post（“deletesomething.php”，
{itemId:deleteId，deleteItem:“部门”}
);
移除项目滑块（600）；
toastr.错误（“部门删除”）；
console.log（deleteId）；
}
},
危险：{
标签：“取消”，
类名：“btn危险”，
回调：函数（）{
}
}
}
}); 
});
});

如果您确定返回的id是它自己的数据（

idDep=data；

），那么您所要做的就是将所有代码放在ajax请求中，因为在请求之外，您所做的操作会将删除范围中的

数据删除id设置为
未定义的
（您可以通过浏览器检查器进行检查），因此，您只需将所有代码放入success函数中，如下所示：

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

$（“按钮#表单部门”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“addsomething.php”，
数据：$（'form#newDepartment'）。序列化（），
成功：功能（数据）{
document.getElementById（“newDepartment”）.reset（）；
idDep=数据；
var departmentName=$（'#nameDepartment'）.val（）；
var newDepartmentElem=
'  \
\
“+部门名称+”\
\
\
\
\
';
$（newDepartmentElem）.hide（）.appendTo（“#departmentList”）.slideDown（'slow'）；
},
错误：函数（）{
警报（“故障”）；
}
});
});
检查您的后端代码，问题就在那里！！！不，它有效。我可以从其他页面使用它。我想我知道问题在哪里，但我不知道如何解决。也许你能帮忙。在我的代码中，我添加了新的html div，其中包含混合参数data delete id，因为它找不到数据id，也无法发送到服务器。为了解决这个问题，我尝试在ajax.post success回调函数中定义一个包含id的全局变量。但它不起作用。我无法将变量添加到代码中。如何在success回调函数中创建全局变量？插入时，在某处返回“id”？或者不是！我更新了我的问题。您可以在ajax中看到idDep变量。成功功能。我使用div元素，我想添加它。谢谢。这很有效。实际上，首先我喜欢这样做，但当我将所有代码放在ajax请求中时，将div附加到dom中需要一些时间。我认为它必须等待服务器响应。我可以通过单击“保存”按钮同时执行此操作吗？是的，它必须等待服务器响应，您可以在单击按钮时添加laoding图标，并在ajax Success函数中删除它，以便在“保存”按钮中执行相同操作。是的，还可以考虑添加laoding gif图像或类似的内容：）