버튼 클릭시 div 제거 - 문제 : 모든 div 제거

Question

버튼 클릭 이벤트에서 새 div가 만들어집니다. 사용자는 최대한 많은 div를 만들 수 있습니다. div이 생성되면 jqueryui draglable PLUGIN의 도움으로 드래그 할 수있게됩니다. 나는 생성 된 div를 제거하는 클릭 버튼 이벤트를 설정했다. 문제는 사용자가 제거 버튼을 클릭 할 때 모든 div를 제거한다는 것입니다. 각 div에 해당 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

는 html에 text 속성을 돌려

:

이

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

그런 .close 요소 click 이벤트를 쓰기 :

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

jsFiddle Demo을.

Answer 2

귀하의 추가 사업부 버튼을 수정하고이 같은 버튼 이벤트 제거 : 새로운 사업부를 만들 때 이런 식으로

$(".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 클래스가이 줄에서 제거됩니다.

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

그런 다음 마지막 줄에 생성 된 div에 currentDiv 클래스가 추가됩니다. 그래서 항상 마지막으로 생성 된 div는 currentDiv 클래스입니다.

는 그런 다음 JS의 말에이 블록을 추가

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

각 드래그 할 수있는 요소를 클릭하면, 그렇게 제거 버튼을 현재의 사업부로 선택하는 것이 위의 블록 원인이 제거합니다. 데모에서

Check JSFiddle Demo

은 또한 배경 색상을 추가 한 : 빨간색 currentDiv를 들어, 당신은 그것을 제거 할 수 있습니다.

Answer 3

당신은 단순히 draggable 이벤트 후이를 추가 할 수 있습니다

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

JSFIDDLE DEMO