Nächsten Klassen-/Link-Tag ausblenden

Question

Wenn ich auf Abbrechen klicke, möchte ich die nächste ".my-file" -Klasse ausblenden. Ich versuche dies:

<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(); 
    }) 
}) 

Wenn ich auf Abbrechen-Taste ich die Warnung erhalten, aber Versteck nicht funktioniert. Was fehlt mir hier?

Answer 1

closest() wird verwendet, um Elternelemente zu finden. .my-file ist ein Geschwister von .cancel-button, so sollten Sie stattdessen siblings() verwenden.

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

Working example

Wenn Sie garantieren können, dass .my-file immer direkt vor dem .cancel-button in Ihrem HTML erscheinen wird, könnte die Sie die prev() Methode verwenden statt:

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

Answer 2

closest() wird verwendet, um zu finden übergeordnete Elemente in der Hierarchie, verwenden Sie stattdessen prev() wie gezeigt: -

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

DEMO