JQuery - Removing a row of content using a plugin to confirm

Question

I have this markup:

<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>

I am using this JQuery code to remove a row of content when you click on the Delete button:

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

I'd like to use this JQuery to ask for confirmation: http://myclabs.github.io/jquery.confirm/

In the docs, it says we need to use the plugin like this:

$(".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
});

I'm trying to use the plugin mixed with my code for deleting:

$("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
    });

In this line, (this) is no longer refering to $("button.removee"):

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

So and it's not working. Do you have any clue on how to do that?

Thank's in advance!!

Answer 1

Not tested, but this might do the trick. Save the button instance for each button before triggering the confirmation box.

$(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
    });
});

Edit: Updated answer to reflect changes needed to bind the events to dynamically added buttons.

Answer 2

Try using this code

$("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
});