Adding DIV with a close button, dynamically to another DIV using Jquery

Question

I would like to add 4 divs with close buttons on top right corner , aligned horizontally to a parent DIV. When the close button is clicked, the div should be removed from the parent DIV. Is this possible with Jquery ?if someone could post a sample code i would really appreciate it !

Thanks

Answer 1

Let's help you.

jsBin demo

<div class="box">
    <div class="close_box">X</div>

    <h2>Box title</h2>
    <p>Merol muspi rolod tis tema...</p>

</div>

jQ:

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

or simply:

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

Take a look at the docs (always!):

http://api.jquery.com/on/
http://api.jquery.com/parent/
http://api.jquery.com/remove