We help IT Professionals succeed at work.

How to hide the text  dynamically

chaitu chaitu
on
<p>Added<span class="cards">1 Document Card</span>Document Cards<a id="DocumentCards" title="" href="#">Edit</a></p>

i want to hide the text "Document Cards" dynamically using class "cards"
Comment
Watch Question

CERTIFIED EXPERT

Commented:
you can hide it using this
$('.cards').css("display","none");
Hi,

Do you want to hide and show it based on some event like a button click or rollover, or just want it to be there but always hidden?

You have 2 choices:  jquery animation supports show() and hide() functions, or you can use css() function to change the display or visibility property:

show() and hide()
$('.cards').hide();
$('.cards').show();

Open in new window


more info: http://api.jquery.com/hide/


display or visibility (css)
$('.cards').css('display','none');

Open in new window


$('.cards').css('visibiity','hidden');

Open in new window


more info:  http://api.jquery.com/css/
CERTIFIED EXPERT

Commented:
i'm not sure though how you want to trigger this. after a link/ button maybe?
i used jquery to hide it. if you want more javascript and no jquery you can use
document.getElementById('some').style.visibility='hidden'; // you have to apply an id to what you want to hide.
hope that helps

Author

Commented:
i want to hide "Document Cards" ;

final output should be "Added 1 Document Card"  <a>Edit</a> ;

Author

Commented:
	$(document).ready(function(){

$('.cards').hide();


    });

 <BODY>

<p>Added
<span class="cards">1 Document Card</span>
Document Cards
<a id="DocumentCards" title="" href="#">Edit</a>
</p>
 </BODY>
</HTML>

Open in new window

Author

Commented:
$('.cards').hide(); will not work in my case.

i want to hide "Document Cards" outer span text i.e. paragraph text.

Use the 'parent()' function

$('.cards').parent().hide();

Open in new window


$('.cards').parent().css('display','none');

Open in new window

Author

Commented:
not working..
you want the result to appear to be:

<p>Added
<span class="cards">1 Document Card</span>
<a id="DocumentCards" title="" href="#">Edit</a>
</p>

Open in new window


Can you wrap "Document Cards" in a span and hide that?

<p>Added
<span class="cards">1 Document Card</span>
<span id="hideme">Document Cards</span>
<a id="DocumentCards" title="" href="#">Edit</a>
</p>

Open in new window


$('#hideme').hide();

Open in new window

Author

Commented:
i cannot change th existing functionlity.
$('.cards').parent().empty().append(
'Added
<span class="cards">1 Document Card</span>
<a id="DocumentCards" title="" href="#">Edit</a>');

Open in new window


$('.cards') will select your span
.parent() will select the <p> element
.empty() will remove everything from the <p>
.append('...') will repopulate the <p>

this is untested.
It might have to be

$('.cards').parent().empty();
$('.cards').parent().append(
'Added
<span class="cards">1 Document Card</span>
<a id="DocumentCards" title="" href="#">Edit</a>');

Open in new window

solved my problem.check this.

		$(".cards").closest('p:contains("Document Cards")').html(function(i, h) {  

	return h.replace("Document Cards", ''); 
	
	}); 

Open in new window

Author

Commented:
none of the comments used as proper solution.my own comment  perfectly suited as per my need.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.