Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery hide text content in a tag, not the tag itself

Tags:

html

jquery

hide

I have a slider using this html syntax:

<div id="theatre">
    <a class="sliderImg" href="01.jpg" />some-text</a>
    <a class="sliderImg" href="02.jpg" />another-description</a>
    <a class="sliderImg" href="03.jpg" />whatever</a>
    <a class="sliderImg" href="04.jpg" />whatever</a>
</div>

What I need to do is to hide the text of the a tags not the a tags themselves.

I got this but doesn't work.

var imgCaptions = $("#theatre a.sliderImg").html();
$(imgCaptions).hide();

I can't add a span because I use the content for some AJAX. The structure has to remain.

Many thanks for your help. Merry Xmas!

like image 532
Gab Avatar asked Dec 25 '12 18:12

Gab


People also ask

How do we hide the content in jQuery?

jQuery hide() MethodThe hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.

How do I hide text data in HTML?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.

What is difference between remove and hide in jQuery?

hide() sets the matched elements' CSS display property to none . remove() removes the matched elements from the DOM completely. detach() is like remove() , but keeps the stored data and events associated with the matched elements.


2 Answers

I'd suggest:

a.sliderImg {
    color: transparent;
}

You could also use the user-select CSS property to prevent the text being selected:

a.sliderImg {
    color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Or, possibly, use the unselectable attribute on the elements themselves:

<a unselectable="on" class="sliderImg" href="04.jpg">whatever</a>

Incidentally your HTML is malformed, the / should not be in the opening tag (that's only in the opening tag for void elements, such as input or img).

References:

  • user-select.
like image 80
David Thomas Avatar answered Sep 26 '22 01:09

David Thomas


You can remove the text simply by using the .text method:

$(".sliderImg").text('');

Fiddle: http://jsfiddle.net/J5QME/

If you need to store the text for use later, set it as a data attribute on the parent anchor:

$(".sliderImg").text(function(i,v){
    return $(this).data('originalText', v), '';
});

Fiddle: http://jsfiddle.net/J5QME/2/

like image 35
Sampson Avatar answered Sep 25 '22 01:09

Sampson