close sub div's in a parent div

by santosh_patnala

HTML

<div class="box">
    <div class="close_box">X</div>
    <h2>Box title</h2>
    <p>Merol muspi rolod tis tema...</p>
</div>
  
  <div class="box">
    <div class="close_box">X</div>
    <h2>Box title</h2>
    <p>Merol muspi rolod tis tema...</p>
</div>
  
  <div class="box">
    <div class="close_box">X</div>
    <h2>Box title</h2>
    <p>Merol muspi rolod tis tema...</p>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body{font: normal 16px/1.2em Arial, Helvetica, sans-serif;color:#444}
  *{margin:0;padding:0;}
  ul{list-style:none;}
  a{text-decoration:none;color:#666;}
  
 
  .box{
    position:relative;
    float:right;
    background:#eee;
    width:200px;
    padding:15px;
    margin:10px;
  }
  .close_box{
    background:fuchsia;
    color:#fff;
    padding:2px 5px;
    display:inline;
    position:absolute;
    right:15px;
    border-radius:3px;
    cursor:pointer;
  }
  
</style>

JavaScript

$(document).on('click','.close_box',function(){
    $(this).parent().fadeTo(300,0,function(){
          $(this).remove();
    });
});