Question

当我点击取消按钮时，我想隐藏最近的“.my-file”类。我正在尝试这个：

<div>
    <label for="file">file</label>
    <input type="file">
    <a href="#" class="my-file">first file</a>
    <button class="cancel-button" type="button">Cancel</button>
</div>
<div>
    <label for="file">file</label>
    <input type="file">
    <a href="#" class="my-file">Second file</a>
    <button class="cancel-button" type="button">Cancel</button>
</div>

$(function() {
    $('.cancel-button').on('click', function () {
        alert('works');
        $(this).closest('.my-file').hide();
        $(this).closest('a').hide();
    })
})

当我点击取消按钮时，我收到警报，但隐藏不起作用。我在这里缺少什么？

Answer 1

closest()用于查找父元素。 .my-file是.cancel-button的兄弟，因此您应该使用siblings()代替。

$('.cancel-button').on('click', function() {
    $(this).siblings('.my-file').hide();
});

Working example

如果您可以保证.my-file始终会直接显示在HTML中的.cancel-button之前，那么您可以使用prev()方法：

$(this).prev().hide();

Answer 2

closest()用于查找层次结构中的父元素，而不是使用prev()，如下所示： -

$(function() {
    $('.cancel-button').on('click', function () {
      $(this).prev('a.my-file').hide();//OR $(this).prev().hide();
    });
});

DEMO

隐藏最近的类/链接标记

2 个答案: