按一下按钮删除一个div :删除所有div。
按一下按钮删除一个div :删除所有div。
提问于 2014-08-31 08:20:10
在按钮单击事件上创建一个新的div。用户可以创建尽可能多的div。创建div后，由于jqueryui可拖式插件的帮助，它将变得可拖动。我已经设置了另一个单击按钮事件，它移除创建的div。问题是，当单击用户单击remove按钮时，它会删除所有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>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-31 08:40:13
将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演示。
Stack Overflow用户
发布于 2014-08-31 08:26:03
修改Add Div Button并删除Button事件，如下所示：
$(".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");然后在最后一行创建的div中添加currentDiv类。因此，最后创建的div总是有currentDiv类。
然后在JS的末尾添加这个块：
$('body').on('click', '.draggable', function () {
$(".currentDiv").removeClass("currentDiv");
$(this).addClass("currentDiv");
});上面的块导致当您单击每个可拖动的元素时，它选择为当前div所以删除按钮，删除它。
检查JSFiddle演示
在演示中，我还添加了一个背景颜色:红色表示currentDiv，您可以删除它。
Stack Overflow用户
发布于 2014-08-31 09:16:34
您可以简单地在draggable事件之后添加以下内容：
var closeBtn = '<a href="#xcv" onclick="$(this).unwrap();$(this).remove();" >close</a>';
$('.placement').append(closeBtn);JSFIDDLE演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25590188
复制相关文章
相似问题
腾讯云开发者
