Question

希望有人可以提供建议。单击链接后尝试删除行时出现问题。

HTML

<table>
  <tr><td>Some Data</td><td><a href="#" class="remove-row>Remove Row</a></td></tr>
  <tr><td>Some Data</td><td><a href="#" class="remove-row">Remove Row</a></td></tr>
</table>

现在JS

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

这应该是非常简单的，但不是删除行。只是为了踢，如果我把它改成像

这样的东西

$('.remove-row').addClass('foo');

它会将foo添加到所有表行。所以可以理解为什么它没有删除最近的行。

任何想法？

先谢谢。

Answer 1

问题是this目前引用了success回调中的ajax对象，但这是一个简单的修复，请使用content选项，如下所示：

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   context: this,                    //add this here!
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

context选项决定this回调函数中.remove-row的内容，因为您希望它是您点击的this，请使用{{1}}作为选项。

Answer 2

尼克的答案应该有效，但你也可以这样做，我不知道哪一个更好，可能是尼克的一个，但无论如何它都可以帮助......

$("a.remove-row").live('click', function(eve){
  var row = this;
  eve.preventDefault();
  $.ajax({
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(row).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

Answer 3

您在第一行有未关闭的属性class="remove-row。

See here

Answer 4

手前移除/隐藏会不会更容易？

像这样：

$("a.remove-row").live('click', function(eve){
      $(this).hide();
      <The rest of your code logic>
         ......

jQuery最接近的TR选择

4 个答案: