Удаление div при нажатии кнопки-проблема: удаление всех divs

на событии нажатия кнопки создается новый div. Пользователь может создать как можно больше divs. После div создается он становится перетаскиваемым благодаря помощи перетаскиваемого jQueryUI плагин. Я установил другое событие on click button, которое удаляет созданный div. Проблема в том, что при нажатии кнопки пользователь нажимает кнопку Удалить, она удаляет все divs. Как добавить кнопку к каждому 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>
6
javascript jquery jquery-ui

3 ответов

повернуть 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.

7

измените кнопку Add Div и удалите событие 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");

тут currentDiv класс добавляется в созданный div в последней строке. Поэтому всегда последний созданный div имеет currentDiv класса.

затем добавьте этот блок в конце вашего JS:

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

вышеуказанный блок вызывает то, что при нажатии на каждый перетаскиваемый элемент он выбирается как текущий div так удалить кнопку, удалите это.

Проверить JSFiddle Демо

в демо я также добавил цвет фона: красный для currentDiv, вы можете удалить его.

1

Вы можете просто добавить этого после draggable событие : 

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

JSFIDDLE DEMO

0