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

Общие

Как я могу выбрать первый сопоставимый предок элемента в 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, который следует этой логике:

"Здесь элемент, теперь найдите ближайшего предка, который соответствует некоторым критериям выбора и вернет его"

Спасибо

Ответы

Ответ 1

Это будет closest:

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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