Usuwanie przycisku div na przycisku - problem: usuwanie wszystkich elementów div

Question

W zdarzeniu kliknięcia przycisku tworzony jest nowy element div. Użytkownik może utworzyć tak wiele elementów div, jak to możliwe. Po utworzeniu div staje się on przeciągalny dzięki pomocy jqueryui draggable PLUGIN. Ustawiłem inne zdarzenie click click, które usuwa utworzony div. Problem polega na tym, że po kliknięciu przez użytkownika przycisku usuwania usuwa on wszystkie elementy div. W jaki sposób można dodać przycisk do każdego div, który wyraźnie usuwa ten element 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

Włącz właściwość text do html:

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

Następnie napisać click imprezę dla .close elementów:

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

jsFiddle Demo.

Answer 2

Modyfikowanie Dodaj przycisk Div ​​i przycisk Usuń zdarzenie tak:

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

W ten sposób podczas tworzenia nowego div, wszystkie klasy currentDiv są usuwane w tym wierszu:

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

Następnie klasa currentDiv jest dodana w utworzonym elemencie div w ostatnim wierszu. Tak więc zawsze ostatni utworzony div ma klasę currentDiv.

Następnie dodać ten blok na końcu swoich JS:

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

Powyższy blok przyczyną, że po kliknięciu na każdy element przyciągany, to wybrany jako bieżącym div więc przycisk Usuń, usuń to.

Check JSFiddle Demo

w demo Mam też dodać background-color: red dla currentDiv, można ją usunąć.

Answer 3

Można po prostu dodać to po draggable imprezy:

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

JSFIDDLE DEMO