Comment sélectionner le premier ancêtre qui correspond à un sélecteur?

Question

Général:

Comment puis-je sélectionner le premier correspondant à l'ancêtre d'un élément en jQuery?

Exemple:

Prendre ce bloc HTML

<table>
    <tbody>
        <tr>
            <td>
                <a href="#" class="remove">Remove</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" class="remove">Remove</a>
            </td>
        </tr>
    </tbody>
</table>

Je peux supprimer une ligne dans la table en cliquant sur "Supprimer" à l'aide de ce code jQuery:

$('.remove').click(function(){
    $(this).parent().parent().hide();
    return false;
});

Cela fonctionne, mais il est assez fragile. Si quelqu'un met l' <a> en <div>, par exemple, elle allait se briser. Est-il un sélecteur de syntaxe jQuery qui suit cette logique:

"Voici un élément, maintenant, trouver le plus proche de l'ancêtre qui correspond à certains critères de sélection et retourner"

Merci

Answer 1

Ce serait closest :

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

Answer 2

Je préfère utiliser closest comme le souligne @Kobi (+1) car cela semble être le moyen le plus concis de le faire. Juste pour souligner, vous pouvez également utiliser parents :

 $(this).parents("tr:first")
 

Answer 3

Vous pouvez passer un sélecteur à l'argument parent, je crois.

 $('.remove').click(function(){
  $(this).parents("tr:first").hide();
  return false;
});
 

Ou vous pouvez utiliser le plus proche comme indiqué par une autre réponse.

 $('.remove').click(function(){
  $(this).closest("tr").hide();
  return false;
});
 

Answer 4

En supposant que vous utilisez jQuery 1.4, vous pouvez utiliser .parentsUntil () qui retournera tous les ancêtres jusqu'à , mais non l'ancêtre sélectionné.

Donc, dans votre cas, j'irais avec quelque chose comme ceci:

 $('.remove').click(function(){
    $(this).parentsUntil("tr").parent().hide();
    return false;
});