I don't know if the Title of this post makes sense, but here's a sample of what I'm working with:

<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>

I need to remove the second row by finding it using the previous row's first <td>'s <a>'s name attribute. The psuedo code would be something like

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

I don't know if that's proper jQuery syntax (as is, it doesn't work), but hopefully you get the point: the "starting point" of the selector is the name attribute of the <a> tag and I need to remove the following row. The <a> tag's name attribute is the only unique attribute in a given <tbody> on the page (not inlcuding the third and fourth <td>s in that row, but you get the point).

What is a properly formatted/syntaxed jQuery selector to do that?

I don't know if the Title of this post makes sense, but here's a sample of what I'm working with:

<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>

I need to remove the second row by finding it using the previous row's first <td>'s <a>'s name attribute. The psuedo code would be something like

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

I don't know if that's proper jQuery syntax (as is, it doesn't work), but hopefully you get the point: the "starting point" of the selector is the name attribute of the <a> tag and I need to remove the following row. The <a> tag's name attribute is the only unique attribute in a given <tbody> on the page (not inlcuding the third and fourth <td>s in that row, but you get the point).

What is a properly formatted/syntaxed jQuery selector to do that?

• javascript
• jquery
• html-table
• row

6 Answers 6

If I understand your question correctly:

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

Links to the corresponding JQuery documentation:

• :has() Selector
• Attribute Equals Selector
• Next Adjacent Selector

If I've understood your question correctly, then you want something like this:

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

See an example fiddle here.

you can try

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

if it doesn't work please alert the classID to check if it's ok

Your sample works, just make sure that classID is set: working fiddle

This doesn't necessarily answer your question directly, but just a word of advice... If you have a table listing classes in each row, then it makes more sense to put everything about each individual class within the same row. So, the documents container really belongs within the class row that the documents are associated with.

The benefits to that are:

• Semantic meaning and relationship association
• Much easier way to reference parent/sibling/child elements

Then all you'd have to do is something like this:

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

This code works for me (tested on your HTML above):

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

Also I'm not sure exactly where this code is executed in your example, but if it's supposed to happen "on load" you need to wait for the DOM to be ready:

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