Rimozione di un pulsante div sul clic - problema: rimozione di tutte le div

Question

In un evento clic del pulsante viene creato un nuovo div. Un utente può creare il maggior numero possibile di div. Una volta creato uno div, diventa trascinabile grazie all'aiuto del jqueryui trascinabile PLUGIN. Ne ho impostato un altro sull'evento pulsante clic che rimuove il div creato. Il problema è che quando si fa clic sull'utente fa clic sul pulsante Rimuovi per rimuovere tutte le div. Come si può aggiungere un pulsante a ogni div che rimuove specificamente quel 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

Ruotare la proprietà text-html:

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

quindi scrivere click evento per .close elementi:

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

jsFiddle Demo.

Answer 2

Modificare il pulsante Add Div e rimuovere evento Pulsante come questo:

$(".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 questo modo, quando si crea un nuovo div, tutte le classi currentDiv vengono rimosse in questa riga:

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

Quindi la classe currentDiv viene aggiunta nel div creato nell'ultima riga. Quindi sempre l'ultimo div creato ha classe currentDiv.

Quindi aggiungere questo blocco alla fine dei tuoi JS:

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

Il blocco causa di cui sopra che, quando si fa clic su ogni elemento trascinabile, è selezionato come div corrente pulsante in modo togliere, togliere questo.

Check JSFiddle Demo

Nel demo ho anche aggiungere un background-color: rosso per currentDiv, è possibile rimuoverlo.

Answer 3

Si può semplicemente aggiungere questo dopo draggable evento:

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

JSFIDDLE DEMO