CODEWITHSUNDEEP
jquery
user636525
user636525

Reputation: 3200

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

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

Upvotes: 3

Views: 18603

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

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

Upvotes: 10

Related Questions