Как выбрать первого предка, который соответствует селектору?

Question

Общее

Как выбрать первого подходящего предка элемента в jQuery?

Пример

Возьмите этот блок 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>

Я могу удалить строку в таблице, нажав «Удалить», используя этот код jQuery:

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

Это работает, но довольно хрупко. Например, если кто-то положит <a> в <div>, он сломается. Есть ли синтаксис селектора в jQuery, который следует этой логике:

«Вот элемент, теперь найдите ближайшего предка, который соответствует некоторым критериям выбора, и верните его» * ​​1021 *

Спасибо

Answer 1

Это будет closest:

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

Answer 2

Я предпочитаю использовать closest, так как @Kobi указывает (+1), так как это кажется наиболее кратким способом сделать это. Просто чтобы указать, вы также можете использовать parents:

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

Answer 3

Вы можете передать селектор родительскому аргументу, я верю.

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

Или вы можете использовать ближайший, как указано в другом ответе.

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

Answer 4

Предполагая, что вы используете jQuery 1.4, вы можете использовать .parentsUntil () , который вернет всех предков, но НЕ , включая выбранного предка.

Так что в вашем случае я бы сказал что-то вроде этого:

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