Hide html content with jQuery or CSS

Question

In the following html, can I hide the content starting from ( and ending at ) using CSS or jQuery. The problem I'm facing is that the ( and later code is not wrapped in any div, so I can not use CSS to find the div class and set display:none.

<span>
    <a class="test" href="#">test</a> 
    (<a href="#">?</a>) 
</span>

So assign an ID or a class to the second <a href> and hide that. Or is that not an option? — Blazemonger
– Blazemonger, Commented Jul 26, 2012 at 19:20
So: what is special with this a tag? If the answer is nothing, then it'll be hard to target... — Christophe
– Christophe, Commented Jul 26, 2012 at 19:23
If I'm understanding correctly, you want to hide the second a tag as well as the parenthesis on either side of it, but not the first link, right? — MrOBrian
– MrOBrian, Commented Jul 26, 2012 at 19:23
@ZoltanToth want to hide the parentheses and the content inside it. — user966582
– user966582, Commented Jul 26, 2012 at 19:24

Blazemonger · Accepted Answer · 2012-07-26 19:27:52Z

3

$('span a:not(".test")').hide(); will work on your limited example.

However, it won't hide the parentheses. To do that, you'll need a specialized function to remove just the code you don't want:

$('span').html(function(i,old) {
    return old.substring(0,old.indexOf('('));
});

http://jsfiddle.net/pkMgP/

If you want to hide that instead of removing it, you'll need to wrap it all up in an HTML element and apply styles to that:

$('span').html(function(i,old) {
    var idx = old.indexOf('(');
    return old.substring(0,idx) + '<span style="display:none">' + old.substring(idx) + '</span>';
});

http://jsfiddle.net/pkMgP/1/

edited Jul 26, 2012 at 19:27

answered Jul 26, 2012 at 19:21

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dilloncarter · Accepted Answer · 2012-07-26 19:21:49Z

0

have you tried using the element display:none; ?

answered Jul 26, 2012 at 19:21

dilloncarter

351 silver badge8 bronze badges

4 Comments

dilloncarter Over a year ago

i mean as in an inline style style="display:none;"

Brian Over a year ago

this should really be a comment to the op and not an answer.

dilloncarter Over a year ago

I would if I knew where the "add comment" is

Brian Over a year ago

same way you added these comments :-) just at the bottom of the op.

Alnitak · Accepted Answer · 2012-07-26 19:23:24Z

0

You can't hide parts of DOM nodes, only complete nodes.

You'll need to change your markup to wrap the entire link including the parentheses in a single <span>.

This could be done in Javascript, but it would be far easier to do it at source.

answered Jul 26, 2012 at 19:23

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Johndave Decano · Accepted Answer · 2012-07-26 19:25:17Z

0

Using jquery:

$('.test').next().hide();

This will leave just the parenthesis

answered Jul 26, 2012 at 19:25

Johndave Decano

2,1032 gold badges16 silver badges16 bronze badges

Comments

Robert · Accepted Answer · 2012-07-26 19:25:32Z

0

I had to reread you post a few times, but I think I see what you want. You won't be able to do what you're asking directly.

If you can edit the HTML then add a inner span surrounding the content you want to hide and hide it.

I'm thinking you're asking this question because you can't edit the HTML. In that case, what you could do is:

construct a JQuery expression to find the outer span element
Hide the span element using $(e).css('display','none')
Use javascript to copy the contents of the span, remove the stuff you want to hide
Create a new span containing the contents created in #3, add it to the DOM right before or after the span you've hidden.
You can now toggle back and forth to make the contents swap visibility.

answered Jul 26, 2012 at 19:25

Robert

2,44621 silver badges12 bronze badges

2 Comments

Robert Over a year ago

You can also use something like what Blazemonger suggests, if you do you can stash the hidden content away in the .data() for the jquery node, or keep it in an array somewhere.

user966582 Over a year ago

yes I want to hide without changing HTML, and yes, I'll look at the answer by Johndave and Blazemonger.

Blynn · Accepted Answer · 2012-07-26 19:33:21Z

0

Simply add some classes to define actions.

<span>
  <a class="go" href="#">test</a> 
  (<a href="#" class="hideme">?</a>) 
</span>

$('.go').bind('click', function(e){
    $('.hideme').hide();
});

answered Jul 26, 2012 at 19:33

Blynn

1,4217 gold badges27 silver badges49 bronze badges

Collectives™ on Stack Overflow

Hide html content with jQuery or CSS

6 Answers 6

Comments

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related