删除按钮上的div单击 - 问题:删除所有div

时间:2014-08-31 08:20:10

标签: javascript jquery jquery-ui

在按钮单击事件上,将创建一个新div。用户可以创建尽可能多的div。创建div后,由于jqueryui可拖动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>

3 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:1)

修改您的添加Div按钮和删除按钮事件,如下所示:

$(".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,所以删除按钮,删除它。

<强> Check JSFiddle Demo

在演示中,我还为currentDiv添加了背景颜色:红色,你可以删除它。

答案 2 :(得分:0)

您可以在draggable事件后添加此内容:

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

JSFIDDLE DEMO