Jquery removes certain children

Question

I have the following code:

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

Is it possible to replace .TopNotificationIcon with this , but inside this specific class only span exists.

This is the structure

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

When you click .TopNotificationIcon , the span should be removed.

Answer 1

If you have a 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

Try it...

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

This will remove all span elements with the TopNotificationIcon class, as well as child elements

Answer 4

Yes, but you need to change the line to:

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

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

Answer 5

If you want to delete the entire range in TopNotification, you can do this:

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

It will remove all children in the div.