Jquery：ajax成功后删除DOM元素

Posted 2023-05-09

【中文标题】Jquery：ajax成功后删除DOM元素

【英文标题】：Jquery:Remove DOM element after ajax success

【发布时间】：2014-03-21 14:39:48

【问题描述】：

在 ajax 成功后尝试删除元素时遇到问题..

这是我的 ajax 代码：

verifyRequest.denyUser = function(requestId,element)
    $.ajax(
        url: loaderURL+'idverified/denyRequest',
        dataType:"json",
        type:"post",
        data:
            id:requestId,   
        ,
        success: function(data)
            element.remove();
           
    ); 

并收听此事件：

$("#requestUsers ul li .remove").click(function()
    var id = $(this).attr("data-value"),
        element = $(this).parent('li');

        verifyRequest.denyUser(id,element);     
);

问题是这样的 - ajax 工作正常但是当涉及到“成功：”部分时 它不会删除元素。

我尝试了这段代码，它可以工作，但这不符合我的需要：

$("#requestUsers ul li .remove").click(function()
    var id = $(this).attr("data-value"),
        element = $(this).parent('li');

        verifyRequest.denyUser(id,element);
            element.remove();//and it did worked
);

有人能解释一下为什么会这样吗？谢谢

【问题讨论】：

你确定成功回调被触发了吗？

是的，很确定.. 在控制台上返回 200OK

你确定你的“成功”处理程序真的被调用了吗？可以在里面添加console.log或者断点来验证吗？

你确定那个元素是一个 jQuery 对象吗？如果不是，你应该这样做$(element).remove();

@NEWBIE 原因很多，也许你应该看看你的服务器脚本...

【参考方案1】：

存储引用，然后将其删除。这样：

verifyRequest.denyUser = function(requestId,element)
var t = $(element);
$.ajax(
    url: loaderURL+'idverified/denyRequest',
    dataType:"json",
    type:"post",
    data:
        id:requestId,   
    ,
    success: function(data)
        $(t).remove();
       
); 

【讨论】：

我认为在你的成功函数上你应该做t.remove();而不是$(t).remove();，因为你定义了t=$(element)，所以它已经是一个jQuery对象了。

控制台中的任何错误。尝试在成功功能上发出警报。

@vekah: $(element) 将返回 jquery 对象。是的，你需要 $(t) 才能访问它。

@MilindAnantwar 不，vekah 是正确的，不需要包裹两次

【参考方案2】：

解决方案： 问题实际上出在服务器端..如果您依赖成功事件，您的服务器端必须始终返回一个 json ..即使它为空或您喜欢什么。因为只有在

的情况下才会触发成功

<?php  
 if(isset($_POST['yourData']) && !empty($_POST['yourData']))
   if(//evaluate further)
     // This will trigger success
     echo json_encode(array());
   else
     throw new HttpException(403,'Unauthorized request');
   
 else
  throw new HttpException(404,'Not Found')
 
?>

如果您的评估返回true，则此方式将触发成功..