CODEWITHSUNDEEP
jqueryremoveclass
markratledge
markratledge

Reputation: 17561

jQuery: using remove(); for <tr> rows

I need to remove several <tr> rows in a rendered page within the table class "form-table"using remove(); See the commented markup below.

The problem is that there are several other tables with the class "form-table" in the rendered page (other tables not shown below for clarity). Each of these other tables has a different <h3> heading.

Is it possible to target the last two <tr> rows in the table below while ignoring other tables with the same class of form-table? Can these two <tr>'s be targeted using the <h3>Name</h3> heading to this table?

I.e.:

 jQuery(document).ready(function( $ ){
    $("*target <tr>'s here*").remove();

  });

Rendered markup:

<h3>Name</h3>

<table class="form-table">
    <tr>
        <th><label for="user_login">Username</label></th>
        <td><input type="text" name="user_login" id="user_login" value="subscriber" disabled="disabled" class="regular-text" /> <span class="description">Usernames cannot be changed.</span></td>
    </tr>

<tr>
    <th><label for="first_name">First Name</label></th>
    <td><input type="text" name="first_name" id="first_name" value="subscriber" class="regular-text" /></td>
</tr>

<tr>
    <th><label for="last_name">Last Name</label></th>
    <td><input type="text" name="last_name" id="last_name" value="" class="regular-text" /></td>
</tr>

<!-- Need to display:none or remove the two <tr>'s below: -->

<tr>
    <th><label for="nickname">Nickname <span class="description">(required)</span></label></th>
    <td><input type="text" name="nickname" id="nickname" value="subscriber" class="regular-text" /></td>
</tr>

<tr>
    <th><label for="display_name">Display name publicly as</label></th>
    <td>
        <select name="display_name" id="display_name">
                    <option  selected='selected'>subscriber</option>
                </select>
    </td>
</tr>

<!-- Need to display:none or remove the two <tr>'s above: -->

</table>

Upvotes: 2

Views: 889

Answers (3)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

you can use :first or nth-child() function to target the specific table, then you can use gt() function to target all TRs greater than 2.

example 1:

// assuming that your target table is the first one among the other tables with the same class
var myTable = $("h3 :first").next(".form-table").find("tr:gt(2)").remove()

example 2:

// assuming that your target table's h3 has the text "Name" inside

var myTable = $("h3:contains('Name')").next(".form-table").find("tr:gt(2)").remove()

Upvotes: 1

user1726343
user1726343

Reputation:

How about:

$('h3:contains("Name") + table tr:gt(2)')

Or

$('h3:contains("Name")').next().find('tr:gt(2)')

EDIT:

Demo: http://jsfiddle.net/kMYY3/1/

Upvotes: 2

Brombomb
Brombomb

Reputation: 7076

what about:

$('.form-table tr:gt(2)');  //note the index is 0 based

jQuery gt selector

Upvotes: 0

Related Questions