Removing a div on button click - issue: removing all divs

Question

On a button click event a new div is created. A user can create as many divs as possible. Once a div is created it becomes draggable thanks to the help of the jqueryui draggable PLUGIN. I have set another on click button event that removes the created div. The problem is that when clicking the user clicks the remove button it removes all divs. How can append a button to each div that specifically removes that div? JSFIDDLE

Jquery

/** Remove newly created div **/
$(".remove").click(function(){
    $(".draggable").remove();
});
var z = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        text: $('textarea').val(),
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');

    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
<input type="button" id="button" value="Add Div with Text" />
<button class="remove">Remove div</button><br/>
<div>
    <div class="middle-side empty"></div>
</div>

Answer 1

Turn the text property to html:

html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',

Then write click event for .close elements:

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});

jsFiddle Demo.

Answer 2

Modify your Add Div Button and Remove Button event like this:

$(".remove").click(function(){
    $(".currentDiv").remove();
});

var z = 1;
$('#button').click(function (e) {
    $(".currentDiv").removeClass("currentDiv");
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        text: $('textarea').val(),
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
        },
        drag: function() {
            $(".currentDiv").removeClass("currentDiv");
            $(this).addClass("currentDiv");
        },
    }
}).addClass('placement currentDiv');

In this way when you create a new div, all currentDiv classes are removed in this line:

$(".currentDiv").removeClass("currentDiv");

Then the currentDiv class is added in created div in last line. So always the last created div has currentDiv class.

Then add this block at the end of your JS:

$('body').on('click', '.draggable', function () {
    $(".currentDiv").removeClass("currentDiv");
    $(this).addClass("currentDiv"); 
});

The above block cause that when you click on each draggable element, it selected as current div so Remove button, remove that.

Check JSFiddle Demo

In demo i have also add a background-color:red for currentDiv, you can remove it.