JQuery - удаление строки контента с помощью плагина для подтверждения

Question

JQuery - удаление строки контента с помощью плагина для подтверждения

0

У меня есть эта разметка:

<div class="form-group conteiner">
    <div class="row">
        <div class="col-md-2">
            <label for="date">Date:</label>
            <div class="input-group date datetimepickaa"  id="datetimepickerloop1" data-date-format="YYYY/MM/DD">
            <input type="text" class="datetimepickaa"  data-date-format="YYYY/MM/DD"  class="datetimepickaa" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
        <div class="col-md-9">
            <label for="notes">Notes:</label>
            <textarea class="form-control autosize" id="" name="">Lorem ipsum dolor sit amet.</textarea>
        </div>
        <div class="col-md-1">
        <button type="button" class="removee" >Delete</button>
        </div>
    </div>
</div>

Я использую этот код JQuery для удаления строки содержимого, когда вы нажимаете кнопку "Удалить":

$("button.removee").click(function(){
    $(this).closest(".conteiner").remove();
});

Я хотел бы использовать этот JQuery для запроса подтверждения: http://myclabs.github.io/jquery.confirm/

В документах говорится, что мы должны использовать плагин следующим образом:

$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        // do something
    },
    cancel: function(button) {
        // do something
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: false
});

Я пытаюсь использовать плагин, смешанный с моим кодом, для удаления:

$("button.removee").confirm({
    text: "Are you sure you want to delete this row?",
    title: "Confirmation required",
    confirm: function() {
        $(this).closest(".conteiner").remove();
    },
    cancel: function() {
        // do something
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: false
    });

В этой строке (это) больше не ссылается на $ ("button.removee"):

$(this).closest(".conteiner").remove();

Так и не работает. У вас есть какие-то подсказки о том, как это сделать?

Заранее спасибо!!

Supialios 29 апр. 2014, в 12:08

Источник

Теги:

javascript

jquery

scope

jquery-plugins

confirm

2 ответа

1

Попробуйте использовать этот код

$("button.removee").confirm({
text: "Are you sure you want to delete this row?",
title: "Confirmation required",
confirm: function() {
    $("button.removee").closest(".conteiner").remove();
},
cancel: function() {
    // do something
},
confirmButton: "Yes I am",
cancelButton: "No",
post: false
});

PiotrHyrczak 29 апр. 2014, в 08:01

0

Этот код работает, только если у вас есть одна строка контента, но у меня их больше одной. Таким образом, он удаляет все строки, а не ту, в которой вы нажимаете кнопку «Удалить».
Marc Vidal Moreno 29 апр. 2014, в 09:58

Ещё вопросы

Этот код работает, только если у вас есть одна строка контента, но у меня их больше одной. Таким образом, он удаляет все строки, а не ту, в которой вы нажимаете кнопку «Удалить».

ZiNNED · Accepted Answer · 2014-04-29T08-02-00.000Z

Не проверено, но это может сделать трюк. Сохраните экземпляр кнопки для каждой кнопки, прежде чем запускать окно подтверждения.

$(document).on("click", "button.removee", function()
{
    var btn = $(this);

    $(this).confirm({
        text: "Are you sure you want to delete this row?",
        title: "Confirmation required",
        confirm: function() {
            btn.closest(".conteiner").remove();
        },
        cancel: function() {
            // do something
        },
        confirmButton: "Yes I am",
        cancelButton: "No",
        post: false
    });
});

Изменение: обновленный ответ, чтобы отразить изменения, необходимые для привязки событий к динамически добавленным кнопкам.

Вот так это работает и ... Но не в моем примере, потому что мне нужно использовать код внутри функциональности элемента ADD (я реализую решение "добавить / удалить поля ввода"). Поэтому каждый раз, когда я добавляю новый элемент, он связывает диалог подтверждения с каждой строкой. Это означает, что я должен много раз подтвердить удаление ОДНОГО элемента.
Я обновил код. Теперь он должен работать и с динамически добавленными кнопками. Просто убедитесь, что код вызывается только один раз (во время инициализации страницы в document.ready() или что-то еще).