Hiding an inner div tag using jQuery?

I am trying to hide div with Value2. I tried many things but no success so far. Below is sample HTML code

<thead class="line-item-grid-header">
    <tr>
        <th>
            <div>Value1</div>
        </th>开发者_Python百科;
        <th>
            <div>Value2</div>
        </th>
    </tr>
</thead>

i am trying to hide the second div specifically.

Any ideas?

---

Normally, you would identify a <table> first, but without that information:

$('th:contains(Value2)').hide();

Note that the above will look for "Value2" as part of any other text, so "Value21" will cause it to match too.

For something more robust, that strictly matches "Value2", as well as ignoring leading and trailing whitespace, then:

$('th').filter(function () {
    return $.trim($('div', this).text()) == "Value2";
}).hide();

---

To hide 'div'

$("thead.line-item-grid-header tr th div:contains(Value2)").hide();

To hide 'th'

$("thead.line-item-grid-header tr th:contains(Value2)").hide();

Please see example http://jsfiddle.net/JURSU/1/

---

Always try to give id to elements which you need to access in order to get values, toggle visibility and more. it makes your life easier and prevents your human errors. otherwise you can specify class name and access them via jquery to process them.

for example:

<thead class="line-item-grid-header">
<tr>
    <th>
        <div>Value1</div>
    </th>
    <th>
        <div id='mydiv'>Value2</div>
    </th>
</tr>
</thead>

 <script type="text/javascript">
 $(function () {
        $("#bthidemydiv").click(function () {
 $("#mydiv").hide();
});
});
</script>

Hope this helps

---

I suggest that you add some class value (even if there is no explicit css style defined for that class) OR add some id to your divs.

That way you can directly find them by id or class.

Another solution will be to have id or class to the parent div and then traverse the div you want to reach.

Finding the div by it's containing text might break if the content changes.

If the text is always fixed, then you can go that route.

I just tested this, it works. Please try and let me know how it goes...

<script type="text/javascript">
    $(function () {
        $('.line-item-grid-header div').each(function () {
            alert('div');
            var txt = $(this).text();
            if (txt === 'Value2'){
                //$(this).text('Value 3');
                $(this).hide();

                //break out of loop
                return false;
            }
        });
    });
</script>