Problems while removing Row using JS in Asp.net Core MVC

Question

I have a dynamic address registration where the user adds and removes the addresses dynamically. Each Row that is added is inside the "div-addressees". I am unable to remove the Rows ('form-group align-items-center Row') using JS. I am using a swal component to display warning messages... I believe it is stealing focus and disturbing. Someone knows how to solve?

HTML:

<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-enderecos">

                @for (int i = 0; i < Model.Count(); i++)
                {   
                    <div class="form-group align-items-center row">
                        <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default">
                            <div class="card-block">
                            //Fields1
                            </div>
                            <div class="card-block"> 
                            //Fields2
                            </div>
                            <div class="card-block">  
                            //Fields3
                            </div>
                        </div>
                    </div>  
                }

            </div>
        </div>
    </div>
</div>

JS:

$("#div-enderecos").on("click", ".btn-remover-endereco", function (e) {
        e.preventDefault();

        swal({
        title: "Tem certeza?",
        text: "Esta operação excluirá permanentemente este endereço.",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-warning",
        confirmButtonText: 'Sim, prosseguir!',
        cancelButtonText: "Não, cancelar!",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function (isConfirm) {
        if (isConfirm) {

            $(this).parent().parent().parent().parent().parent().parent().remove();



        } else {
            swal("Cancelado", "Operação cancelada! :)", "error");
        }
    });

 })

Answer 1

The $(this) within the Swal function loses the reference. It is necessary to store it in a variable in order to use within that function. Before Swal, put:

var $this = $(this);

Now the variable $this has as reference the button that triggered the event. No if, instead of doing...

$(this).parent().parent().parent().parent().parent().parent().remove();

...using that much of .parent(), you can reach the desired element directly with .closest(), using the $this previously created:

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

The code will look like this:

$("#div-enderecos").on("click", ".btn-remover-endereco", function (e) {
        e.preventDefault();

        var $this = $(this);

        swal({
        title: "Tem certeza?",
        text: "Esta operação excluirá permanentemente este endereço.",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-warning",
        confirmButtonText: 'Sim, prosseguir!',
        cancelButtonText: "Não, cancelar!",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function (isConfirm) {
        if (isConfirm) {

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

        } else {
            swal("Cancelado", "Operação cancelada! :)", "error");
        }
    });

 })