jquery: how to hide second div?

Question

i got a jquery question, how can I hide the first/second div, so now it shows Search, Search. I would like to have 'Search':

<tbody>
    <tr>
        <td class="ui-pg-button ui-corner-all" title="Reload Grid" id="refresh_jqgProducts">
            <div class="ui-pg-div">
                <span class="ui-icon ui-icon-refresh"></span>
            </div>
        </td>
        <td class="ui-pg-button ui-corner-all" title="Search">
            <div class="ui-pg-div">
                <span class="ui-icon ui-icon-search"></span>Search</div>
        </td>
        <td class="ui-pg-button ui-corner-all" title="Search">
            <div class="ui-pg-div">
                <span class="ui-icon ui-icon-search"></span>Search</div>
        </td>
    </tr>
</tbody>

i tried something like: $("td .ui-pg-div :nth-child(1)") to retrieve this but to no avail.

Answer 1

I found it with your help:

$("div.ui-pg-div:eq(1)").hide()

Thanks all!

Answer 2

$('td .ui-pg-button').gt(0).find('div').hide();

http://api.jquery.com/gt
http://api.jquery.com/eq

Answer 3

$('td:gt(1)').hide();​

see this demo

Answer 4

In your javascript, as you are working instantly in the element you will have to make sure you have Document.Ready in your scripts.

$(document).ready(){
    $('td[title="Search"]:first').remove();
}

I'm going to match any td with the title of 'Search' so that it will only ever hide the first occurence of the 'Search' item no matter the order.

I'm also removing the item, not just hiding it

Answer 5

$(".ui-pg-button[title='Search']").gt(0).find('div').hide();