jquery remove specific children

Question

I have the following code:

$('.TopNotificationIcon span').remove();    

Can I replace .TopNotificationIcon with this ie only span exists inside this specific class.

This is the structure

<div class="TopNotificationIcon"><span>xxxxx</span></div>

On click of .TopNotificationIcon , span should be removed.

Answer 1

if you have click event for .TopNotificationIcon you can do something like this

$('.TopNotificationIcon').click(function(){
    $('span',this).remove();    
});

Answer 2

I would use the find() method, as it seems to be the fastest:

$("div.TopNotificationIcon").click(function() {

    $(this).find("span").remove();    

});

Answer 3

Yes but youd need to change the line to:

$(this).children('span').remove();

js fiddle: http://jsfiddle.net/UNhhh/1/

Answer 4

Try this...

$('span').remove('.TopNotificationIcon');

This will remove all span elements with the class TopNotificationIcon and also child elements

Answer 5

If you want to remove all span under TopNotification you can do this:

$('div').live('click', function(){
    $(this).children('span').remove();    
});

It will remove all children in a div.