Remove button after select jquery confirm button

662 Views Asked by At

How to remove that particular row of 'Revoke' button after jquery 'Confirm' button is being selected ? The code below is not removing 'Revoke' button permanently.

<td>
    <div class="btn btn-primary revoke-btn">Revoke</div>
</td>

$(document).ready(function() {
    $('.revoke-btn').click(function(e){
        e.preventDefault();
        $.confirm({
            title:'Confirm?',
            content:'Confirm to revoke?',
            buttons:{
                confirm: {
                    text: 'Confirm',
                    btnClass: 'btn-danger',
                    action: function () {
                        $(this).remove();
                        var link = $(e.currentTarget).parent().attr('href');
                        window.location.href=link;
                    }
                },
                cancel: {
                    text: 'Cancel',
                    btnClass: 'btn-default'
                }
            }
        })
    });
});
2

There are 2 best solutions below

4
On

In the $.confirm, you can not get clicked element, so you need to get the element in the variable then you can use this variable into $.confirm action function.

$(document).ready(function() {
    var isBtn = localStorage.getItem("button");

    if(isBtn == "Removed")
    {
          $('.revoke-btn').remove()
    }

    $('.revoke-btn').click(function(e){
        e.preventDefault();
        var elem = jQuery(this);
        $.confirm({
            title:'Confirm?',
            content:'Confirm to revoke?',
            buttons:{
                confirm: {
                    text: 'Confirm',
                    btnClass: 'btn-danger',
                    action: function () {
                        localStorage.setItem("button", "Removed");
                        elem.remove();
                        var link = $(e.currentTarget).parent().attr('href');
                        window.location.href=link;
                    }
                },
                cancel: {
                    text: 'Cancel',
                    btnClass: 'btn-default'
                }
            }
        })
    });
});
2
On
 $('.revoke-btn').click(function (e) {
            e.preventDefault();
            var btn = $(this);
            $.confirm({
                title: 'Confirm?',
                content: 'Confirm to revoke?',
                buttons: {
                    confirm: {
                        text: 'Confirm',
                        btnClass: 'btn-danger',
                        action: function () {
                            console.log(btn);
                            console.log(this);
                            btn.remove();
                            var link = $(e.currentTarget).parent().attr('href');
                            window.location.href = link;
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-default'
                    }
                }
            })
        });

in action function $(this) will not work for button you clicked. just print above output on console you will get it