1

当我单击“红色”类时，我想删除整个 div。我的 JS 是

$('document').ready(function(){
    $('.buttons .red').click(function(){
        $(this).parent('div').parent('div').remove();
        $(this).parent('div').remove();
    });
});

这是我的 HTML

<div data-role="collapsible" data-collapsed="false">
    <h3> Keep</h3>
    <div id= "container">
        <a href="categories.html" class="green" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
        <a href="#" class="red" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
        <a href="categories.html" class="blue" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
    </div>
</div>
4

4 回答 4

1 
$('document').ready(function(){
$('.red').click(function(){


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

});
});

行得通，你只需要删除祖父母，因为“父母”在祖父母里面。

于 2012-10-11T11:57:41.877 回答
0

我建议：

$('a[data-role="button"].red').click(
    function(e){
        e.preventDefault();
        $(this).closest('div[data-role]').remove();
    });

JS 小提琴演示。

这会将 click 事件附加到具有值为 的属性以及 的类的a元素。data-rolebuttonred

事件的默认行为click被阻止（以防止，或页面跳转/加载），选择器将 DOM 从元素hashChange向上移动到具有属性集的第一个祖先元素并删除该元素。adata-role

使用closest()意味着您可以将a元素嵌套在其他元素内（在同一个祖先内），并且该函数仍然可以工作（而每次插入/删除祖先时，parent().parent()...您都必须重写 jQuery 选择器。

参考：

于 2012-10-11T12:02:14.340 回答
0

您的代码可能不起作用，因为您在页面上没有按钮类。此外，您不必调用第二次删除，因为您的第一个育儿 DIV 将与您的可折叠 DIV 一起被删除。

:eq()另一件事是，如果您需要选择祖父母，您可以使用选择器。

工作代码（我只在容器 div 中添加了类按钮）：

$('document').ready(function(){
    $('.buttons .red').click(function(){
        $(this).parents('div:eq(1)').remove();
        return false;
    });
});​

jfFiddle：http: //jsfiddle.net/RxyPk/

于 2012-10-11T11:59:40.417 回答
0

不会退出您的课程按钮。

$('.red').click(function(){


console.log($(this).parent('div').parent('div'));


});

作品

于 2012-10-11T12:00:35.610 回答