Entfernen eines div on button click - issue: Entfernen aller divs

Question

Bei einem Button Click Event wird ein neues div erstellt. Ein Benutzer kann so viele Divs wie möglich erstellen. Sobald ein div erstellt wird, wird es dank der Hilfe des jqueryui ziehbaren PLUGIN ziehbar. Ich habe ein anderes Ereignis auf Klick-Button gesetzt, das das erstellte div entfernt. Das Problem ist, dass wenn der Benutzer auf den Entfernen-Button klickt, alle Divs entfernt werden. Wie kann eine Schaltfläche an jede div anhängen, die diese div entfernt? 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

die text Eigenschaft html Turn:

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

Dann click Ereignis für .close Elemente schreiben:

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

jsFiddle Demo.

Answer 2

Ihre Add Div Knopf Ändern und Button Ereignis wie dieses entfernen:

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

Auf diese Weise, wenn Sie einen neuen div erstellen, Alle currentDiv Klassen werden in dieser Zeile entfernt:

Dann wird die currentDiv Klasse in der letzten Zeile in div erstellt. Also immer das zuletzt erstellte div hat currentDiv Klasse.

Dann diesen Block am Ende Ihrer JS hinzufügen:

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

Der obige Block Grund, dass, wenn Sie auf jedem ziehbar Element klicken, wird es als aktuelle div ausgewählt so Schaltfläche entfernen, entfernen Sie das.

Check JSFiddle Demo

Im Demo hinzufügen Ich habe auch eine Hintergrund-Farbe: rot für currentDiv, können Sie es entfernen können.

Answer 3

Sie können einfach fügen Sie diese nach draggable Veranstaltung:

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

JSFIDDLE DEMO