Используйте jQuery, чтобы найти <tr>после строки с определенным атрибутом в нем

Question

Я не знаю, имеет ли название этот пост смысл, но вот пример того, с чем я работаю:

<tbody>
    <tr class="classRow" bgcolor="#EFE5D3" style="font-weight: bold;">
        <td width="35px"><a class="classEditLink" name="33" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkSelectToDelete" name="deleteClasses[]" value="33" /></td>
        <td>CLASS1234</td>
        <td>Class description</td>
    </tr>
    <tr class="classDocsRow noDocs">
        <td colspan="4">
            <strong>No documents are currently associated with this class.</strong>
        </td>
    </tr>
</tbody>

Мне нужно удалить вторую строку, найдя ее с помощьюАтрибут name первого <td> '* <a> предыдущего ряда.Код psuedo будет выглядеть примерно так:

$('.classRow a[name="' + classID + '"]').parent().parent().next().remove()

Я не знаю, правильный ли это синтаксис jQuery (как есть, он не работает), но, надеюсь, вы поймете точку: «отправная точка»селектор является атрибутом имени тега <a>, и мне нужно удалить следующую строку.Атрибут name тега <a> является единственным уникальным атрибутом в данном <tbody> на странице (не включая третий и четвертый <td> s в этой строке, но вы поймете точку).

Чтоправильно отформатированный / синтаксический селектор jQuery для этого?

Answer 1

Если я правильно понимаю ваш вопрос:

$('tr:has(a[name="33"]) + tr').remove();

Ссылки на соответствующую документацию JQuery:

• :has() Селектор
• Атрибут равно Селектор
• Следующий Селектор Селект

Answer 2

Этот код работает для меня (проверено на вашем HTML выше):

$('.classRow a[name="' + classID + '"]')
    .closest('tr')
    .next()
    .remove();

Также я не уверен точно, где этот код выполняется в вашем примере, но если это должно произойти "при загрузке«Вам нужно подождать, пока DOM будет готов:

$(function() {
    // the code snippet here
});

Answer 3

Это не обязательно ответит на ваш вопрос напрямую, но просто слово совета ... Если у вас есть таблица, в которой перечислены классы в каждой строке, тогда имеет смысл поместить все данные о каждом отдельном классе в одну строку.Таким образом, контейнер документов действительно принадлежит к строке класса, с которой связаны документы.

Преимущества этого:

• Семантическое значение и связь отношений
• Гораздо более простой способ ссылки на родительские / родные / дочерние элементы

Тогда все, что вам нужно сделать, это примерно так:

$('.classRow a[name="' + classID + '"]').parent('classRow').find('.classDocs').remove();

Answer 4

Ваш пример работает, просто убедитесь, что установлен classID: рабочая скрипка

Answer 5

вы можете попробовать

$('.classRow a[name="' + classID + '"]').parents("tr").next().remove();

если это не работает, пожалуйста, предупредите classID, чтобы проверить, все ли в порядке

Answer 6

Если я правильно понял ваш вопрос, то вы хотите что-то вроде этого:

$(".classRow a[name=" + className + "]").closest("tr").next().remove();

См. Пример скрипки здесь .