Find a div inside a div and delete it?

Question

I want to remove a div inside a div using a class Here is my html code

<div class="chartsbar" style="position: absolute; bottom: 0px; left: 27.28%; display: none; height: 0%; background-color: rgb(7, 134, 205); color: rgb(255, 255, 255); width: 0.9730252100840335%; text-align: left; " rel="0" title="09-09-2012 - 0 (0%)"> <div style="text-align:center"> 0 </div> <span style="display: block; width: 100%; position: absolute; bottom: 0; text-align: center; background-color: #0786CD;"> 09-09-2012 </span> </div> 

I tried

 $('.chartsbar').find('div').first().remove(); 

but doesn't seem to work.

Answer 1

 $('.chartsbar div').remove(); 

It should work!

Keep it simple!

EDIT

If you want to remove only the first:

 $('.chartsbar div:first').remove(); 

Answer 2

This can be done with a simple selector. This will remove the first child of the div.

 $(".chartsbar > div:first-child").remove(); 

Answer 3

Try:

 $('.chartsbar > div').remove(); 

Or:

 $('.chartsbar div').remove(); 

Check FIDDLE .

Answer 4

Try with this

 $('.chartsbar').find('div:eq(0)').remove(); 

or use directly

 $('.chartsbar div').remove(); 

Answer 5

Try $('.chartsbar').children().first().remove()