Question

当我点击“红色”类时，我想删除整个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>

Answer 1

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


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

});
});

会工作，你只需要删除祖父母，而“父母”就是祖父母。

Answer 2

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

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

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

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

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

Answer 3

不会退出班级按钮。

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


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


});

作品

Answer 4

我建议：

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

JS Fiddle demo

这会将点击事件附加到a元素，该元素的data-role属性值button，以及red类。

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

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

参考文献：

attribute-equals [attribute="value"] selector。

closest()。

event.preventDefault()。

remove()。

当我点击这个红色框时，我想使用Jquery删除一个列表项。如何定位一个祖父母div？

4 个答案: