删除单击按钮上的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

回答

相关问题