Question

JS

$(".deletable").live('click',function(){
      $(this).parent().effect('explode', 500, function(){
            $(this).parent().remove();
      })
});

HTML

<table>
    <tr>
        <td class='deletable'>hi</td>
    </tr>
</table>

<ul>
    <li>
        <span class=deletable>hi</span>
    </li>
</ul>

如果点击tr并点击td案例li，我想删除span。

由于某些原因，这不起作用，而是删除整个ul / table。

为什么会这样？

Answer 1

由于某些原因，这不起作用，而是整个ul / table   删除。

为什么会这样？

在您当前的代码this中，点击事件会引用所点击的元素然后，您遍历元素的父级，在其上effect调用$(this).parent().effect...。

在效果调用this中，现在引用父（li/tr），但是您调用$(this).parent().remove();遍历父（ul/table）的父级，因此删除整个list/table。

将您的代码更改为仅在效果调用中使用$(this).remove();，因为它已经引用了所需的父元素（li/tr），如下所示：

$(".deletable").live('click',function(){
      $(this).parent().effect('explode', 500, function(){
            $(this).remove();
      })
});

Answer 2

试

$(".deletable").live('click',function(){
    $(this).parent().effect('explode', 500, function(){
        // $(this) is still your parent
        $(this).remove();
    })
});

Answer 3

你也可以使用.parent的选择器。 http://api.jquery.com/parent/

$(this).parent("tr").remove();

如果您正在查看调试工具并且表/ ul只有1个子元素，浏览器可以删除表/ ul，你怎么理解整个表/ ul被删除了，就像孩子们一样，他们没有意义。

当表/ ul有多个孩子时，你可以尝试这个吗？

Answer 4

使用此

$(this).parents("li:first").remove();

选择第一个父母

4 个答案: