Adding and remove div on click using jquery

Question

I have an empty div and in that I have another div which is draggable.

Now wherever I click on the container the draggable div should be appended to (0,0) position and when clicked close button I need to remove that draggable div.How do I do that?

This is what I have:

http://jsfiddle.net/g6cdL/32/

Here is my code:

<div id="content" style="background-color: #E5E5E5; width:500px; height:500px;">
<div class="demo" style="border-style: dashed; background-color: #CCCCCC">

Script:

<script type="text/javascript">
 $(function () {

          $('.demo').draggable({

              containment: '#content',
              cursor: 'move',
              snap: '#content',
                 stop: function () {
                  var offset = $(this).offset();
                  var xPos = offset.left;
                  var yPos = offset.top;
                  $('#posX').text('X: ' + xPos);
                  $('#posY').text('Y: ' + yPos);
              }
          })
    .resizable();

});
</script>

CSS:

.demo {
    position: relative;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}
.demo:before {
    content: '';
    position: absolute;
   height: 30px;
       width: 30px;
       top: -16px;
       left: -16px;
    background: url(http://dummyimage.com/30x30/000/fff&text=close);
    border: 1px solid #000;
}

.container
{
   background-color: #E5E5E5;
    width:500px;
    height:500px;
}

I don't think it's possible to register clicks on the "close" button since you're creating it in CSS instead of in the DOM. Do this instead: jsfiddle.net/mblase75/g6cdL/42 — Blazemonger
– Blazemonger, Commented Oct 27, 2011 at 13:41
Actually there is agood jquery immage annotation plugin so I want similar to this flipbit.co.uk/jquery-image-annotation.html — coder
– coder, Commented Oct 27, 2011 at 13:42

Blazemonger · Accepted Answer · 2011-10-27 13:46:37Z

1

Change your HTML to:

<div id="content" style="background-color: #E5E5E5; width:500px; height:500px;">
    <div class="demo" style="border-style: dashed; background-color: #CCCCCC">
        <div class="closebtn"></div>
    </div>
</div>

Then change .demo:before in your CSS to .closebtn and add this to your JavaScript:

$('.closebtn').click(function(e) {
    e.stopPropagation();
    $(this).parent().hide();
});
$('#content').click(function(e) {
    $('.demo').css({top:0,left:0}).show();
});

http://jsfiddle.net/mblase75/g6cdL/48/

answered Oct 27, 2011 at 13:46

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sedat Başar Over a year ago

this is not working well. At every click it adds a ".demo" div. I mean drag the div and click content again it adds it again.

Collectives™ on Stack Overflow

Adding and remove div on click using jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related