Cannot Get Parent Element Using Jquery

I have the following html structure created dynamically by foreach loop and tried to remove the whole element by accessing it from (ACTIVE HYPERLINK). I tried many different way,

Solution 1:

UPDATED RESPONSE

$('.xxx').click(function (e) {
    var $this = $(this);
    e.preventDefault();
    $('[data-toggle="confirmation"]').confirmation({
        //code omitted for brevity      onConfirm: function () {
            deleteRecord($this); // send reference to delete method
        }
    });
    $('[data-toggle="confirmation"]').confirmation('show');
});

...

functiondeleteRecord($ctrl) {
...

ORIGINAL RESPONSE

If you want the block removed on click on the <a> element, you need to assign a handler to the click event:

$('.xxx').on('click', function(){
    $(this).closest('.aaa').remove();
});

Solution 2:

Use event delagation, event.preventDefault() at click of <a> element to prevent default action of current document reloading or redirection to another resource; pass current event.target : this to deleteRecord()

$(document).on("click", ".xxx", function (e) {
    e.preventDefault();
    var curr = $(this);
    curr.confirmation('show')
    .confirmation({
      // pass `curr` to `deleteRecord()`onConfirm: function () { deleteRecord(curr); }
    })
});


functiondeleteRecord(el) {

    $.ajax({
    //code omitted for brevitysuccess: function (response, textStatus, jqxhr) {
        if (response.success) {             
            el.closest('.aaa').remove();
        }
    });

};

Solution 3:

Here is the final answer that is working like a charm with the help of @ZoliSzabo and guest271314. Many thanks for your help and suggestions...

@foreach (var file in Model.FileAttachments)
{
    <liclass="aaa"><divclass="bbb"><divclass="ccc"><divclass="ddd"><divclass="eee"><ulclass="fff"><li><aclass="xxx"href="javascript:void(0);"data-id="@file.Id"data-toggle="confirmation" ></a><!-- ACTIVE HYPERLINK --></li></ul></div></div></div></div></li>
}



<script>var $ctrl = null; //define variables globally var id = 0; //define variables globally 

    $('.icon-jfi-trash').bind('click', function (e) {
        e.preventDefault();
        $ctrl = $(this);
        id = $(this).data('id');
        $(this).find('[data-toggle="confirmation"]').confirmation('show');
    });


    $('[data-toggle="confirmation"]').confirmation({
        //code omitted for brevityonConfirm: function () { deleteRecord(); }
    });




    functiondeleteRecord() {
        var token = $('[name=__RequestVerificationToken]').val();

        $.ajax({
            type: "POST",
            url: '@Url.Action("DeleteRecord", "Controller")',
            cache: false,
            dataType: "json",
            data: { __RequestVerificationToken: token , id: id },

            success: function (response, textStatus, XMLHttpRequest) {
                if (response.success) {
                    $ctrl.closest('.jFiler-item').remove();
                }
            }
        });
    }

<script>