CODEWITHSUNDEEP
jquery
Lucka
Lucka

Reputation: 343

hide span class when clicking on it

I have a span class with a link. I want to hide the span class when clicking on the link or the span class itself with the jQuery. Can someone please tell me how it can be done? Here's my code and demo.

http://jsfiddle.net/RRkLt/

Thanks

Upvotes: 0

Views: 2490

Answers (5)

David Thomas
David Thomas

Reputation: 253308

Just a thought, but this also works:

$('a:has("span"), a > span').click(
    function(){
       $(this).find('span').remove(); 
    });

JS Fiddle demo.

jQuery API references:

  1. :has() selector,
  2. find(),
  3. remove().

Upvotes: 0

Andrew Jackman
Andrew Jackman

Reputation: 13966

$(document).ready( function() {
    $('a.msg, a.entry').click( function() {
        $(this).find('span').hide();
        return false;
    });
});

it is good to always follow best practices and include the tag with the class (for optimization) and return false with with function

Upvotes: 0

Dexter
Dexter

Reputation: 18452

To hide any span elements within the a:

$(document).ready( function() {
    $('.msg, .entry').click( function() {
        $(this).find('span').hide() 
    });
});

If you want to target more links, you'll need to update the '.msg, .entry' selector to match the new elements too. I would suggest that you consider marking all of the elements you want to apply this to with a common class, like so:

<a class="entry statusLink" ..>...</a>
<a class="msg statusLink" ..>...</a>
<a class="another statusLink" ..>...</a>

Upvotes: 1

Marnix
Marnix

Reputation: 6547

Because you want the span to hide, you need to find the span inside the link. Like this:

$('.msg, .entry').click(function()
{
    $('.number',this).hide();
});

Upvotes: 0

Marcus
Marcus

Reputation: 5143

A rough example of what you could do..

$(document).ready(function() {
    $("a, .number").click(function() {
        $(this).find(".number").hide();
    });
});

Document ready checks that the DOM has been loaded before binding the functions to the events. $(this) means the object passed as a parameter, in this case the clicked object, whether that be .number or the link (a). The .find(number) is there to check that if the link has been clicked, it just hides the .number, not the whole link-tag.

Upvotes: 0

Related Questions