刪除單擊按鈕上的div - 問題：刪除所有div

在按鈕上單擊事件時會創建一個新的div。用戶可以創建儘可能多的div。一旦創建了div，由於jqueryui可拖拽PLUGIN的幫助，它變得可拖動。我已經設置了另一個點擊按鈕事件，刪除創建的div。問題是，點擊用戶點擊刪除按鈕時，它會刪除所有的div。如何在每個div附加一個按鈕來明確刪除該div？ JSFIDDLE 刪除單擊按鈕上的div - 問題：刪除所有div

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>

來源

2014-08-31 Code_Ed_Student

的text財產轉到html：

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

然後寫click事件.close元素：

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

jsFiddle Demo。

來源

2014-08-31 08:40:13 dashtinejad

你可以幫助這裏請http://stackoverflow.com/questions/25600101/containing-a-draggable-div-to-parent – 2014-09-01 06:39:56

修改您添加股利按鈕和刪除這樣的按鈕事件：

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

這樣，當你創建一個新的div，所有currentDiv類都在此行中刪除：

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

然後currentDiv類被添加到最後一行創建的div中。所以總是最後創建的div有currentDiv類。

然後在你的JS的末尾添加此塊：

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

以上塊的原因，當你點擊每個拖動元素，它選定爲當前div中刪除按鈕，刪除。

Check JSFiddle Demo

在演示中，我還添加背景色：紅色currentDiv，您可以將其刪除。

來源

2014-08-31 08:26:03 Moshtaf

這不是一個很好的解決方案爲多個div！ – Farshad 2014-08-31 08:31:01

但它允許我刪除最新創建的div。如果我想刪除第一個創建的div，會發生什麼？ – 2014-08-31 08:31:10

@Code_Ed_Student：對不起，最近似乎你把另一篇文章標記爲答案，但我想我沒有關閉按鈕提供了一個更好的解決方案，查看更新後的答案Demo並讓我知道結果。 – Moshtaf 2014-08-31 09:41:51

可以draggable事件後只需補充一點：

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

JSFIDDLE DEMO

來源

2014-08-31 09:16:34 Farshad

刪除單擊按鈕上的div - 問題：刪除所有div

回答

相關問題