Delete division by click-issue button: delete all divs

Question

When the button is clicked, a new div is created. The user can create as many divs as possible. After creating a div it becomes draggable thanks to the help of jqueryui draggable PLUGIN . I set another click button event that removes the created div. The problem is that when you click the Delete button, it removes all the divs. How to add a button to each div that specifically removes this 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

Rotate the text property in html :

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

Then write a click event for the .close elements:

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

jsFiddle Demo .

Answer 2

Change your Add Button and Remove Button event as follows:

 $(".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'); 

Thus, when you create a new div, all currentDiv classes are removed on this line:

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

Then the currentDiv class currentDiv added to the created div in the last line. Therefore, the always created div has the currentDiv class.

Then add this block to the end of your JS:

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

The above block causes that when you click on each item you drag, it is selected as the current div, so click the Remove button, delete it.

Check JSFiddle Demo

The background color is also added to the demo: red for currentDiv, you can remove it.

Answer 3

You can simply add this after the draggable event:

 var closeBtn = '<a href="#xcv" onclick="$(this).unwrap();$(this).remove();" >close</a>'; $('.placement').append(closeBtn); 

JSFIDDLE DEMO