JQuery讓第二個父母無法正常工作

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元素。 但是，我似乎無法上升兩個級別來隱藏.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元素時隱藏.item元素？

Answer 1

不要將您的操作分配給var，只需使用它：

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

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

Answer 2

你可以使用，

$(this).parent().parent().hide();

或者你可以使用.closest("element") ，

$(this).closest(".item")

Answer 3

在jquery中使用.closest（）

$(this).closest('.item').hide();

小提琴