CODEWITHSUNDEEP
jquery
Nitesh
Nitesh

Reputation: 575

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>
        <th>
            <div>Value2</div>
        </th>
    </tr>
</thead>

i am trying to hide the second div specifically.

Any ideas?

Upvotes: 0

Views: 1283

Answers (4)

kheya
kheya

Reputation: 7631

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>

Upvotes: 0

MuthuKumaran
MuthuKumaran

Reputation: 103

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

Upvotes: 0

David Tang
David Tang

Reputation: 93714

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();

Upvotes: 1

Rick Su
Rick Su

Reputation: 16440

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/

Upvotes: 1

Related Questions