javascript - JQuery 让第二个 parent 不工作

Question

我有这个 HTML:

<li class="chatbox-item">
    <div class="item">
        <div class="item-header">
            <a href="#" class="close-chatbox">X</a>
        </div>
    </div>
</li>

当 a.close-chatbox 被点击时，.item 元素必须被隐藏。但是，我似乎无法上两层来隐藏 .item 元素。

我有这个 JS:

$(".close-chatbox").click(function() {
    // not working
    $(this).parent().parent().hide(); 

    // not working, hides `.chatbox-item` element, and eq(1) doesn't do anything either
    //$(this).parents().eq(2).hide();
});

如何在单击 .close-chatbox 元素时隐藏 .item 元素？

Answer 1

不要将您的操作分配给 var，只需使用它:

$(function () {
    $(".close-chatbox").click(function () {
        $(this).parent().parent().hide();
    });
});

JSFiddle:http://jsfiddle.net/ghorg12110/tkocx8ng/