Bir düğmeyi açma düğmesini tıklatın - sorun: tüm boşlukları kaldırma

Question

Düğme tıklatması olayında yeni bir div oluşturulur. Bir kullanıcı mümkün olduğunca çok sayıda div oluşturabilir. Bir div oluşturulduğunda, sürüklenebilir jpeeryui PLUGIN'un yardımı sayesinde sürüklenebilir. Oluşturulan div'ı kaldıran başka bir tıklama olayı ayarladım. Sorun, kullanıcı tıklatıldığında tıklatma düğmesine tıklandığında tüm div'leri kaldırmasıdır. Özellikle bu div'i kaldıran her bir div'a nasıl bir düğme eklenebilir? 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

html için text özelliğini çevirin

:

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

Sonra .close elemanları click olayı yazın:

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

jsFiddle Demo.

Answer 2

sizin Ekleme Div Düğmesi değiştirin ve bunun gibi Düğme etkinliği kaldır: Yeni div oluştururken bu sayede

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

, currentDiv sınıflarının tümü bu satırda kaldırılır:

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

Son satırda oluşturulmuş div içine currentDiv sınıfı eklenir. Yani her zaman en son oluşturulan div currentDiv sınıfına sahip.

Sonra JS sonunda bu bloğu ekleyin:

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

her sürüklenebilir eleman tıkladığınızda, o kadar düğmeyi çıkarın şimdiki div olarak seçilmiş olduğu yukarıdaki blok nedeni, o kaldırın. tanıtımda

Check JSFiddle Demo

ben de bir arka plan-renk katmak adres: kırmızı currentDiv için, bunu kaldırabilirsiniz.

Answer 3

Sadece draggable olaydan sonra bu ekleyebilirsiniz:

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

JSFIDDLE DEMO