Cannot get parent element using jQuery

Question

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, but cannot reach to it. As the whole block (of ACTIVE HYPERLINK) is repeated, I think it is meaningless to use class name of the hyperlink. I also tried to use a.active but not seem to work.

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

<script>

    $('.xxx').click(function (e) {
        e.preventDefault();
        $('[data-toggle="confirmation"]').confirmation('show');
    });


    $('[data-toggle="confirmation"]').confirmation({
        //code omitted for brevity      
        onConfirm: function () { deleteRecord(); }, // Set event when click at confirm button
    });


    function deleteRecord() {
        var $ctrl = $('.xxx');

        $.ajax({
        //code omitted for brevity

        success: function (response, textStatus, XMLHttpRequest) {
            if (response.success) {             
                ctrl.closest('.aaa').remove();
                //or                
                $("a.active").closest('.jFiler-item').remove();
            }
        });

    };

</script>

Here is some example of my tries:

$("a.active").closest('.aaa').remove();
$(".xxx").closest('.aaa').remove();
$(this).data('.aaa')remove();
$("a.active").parents('li').eq(2)remove();
$(".xxx").parents('li').eq(2)remove();

Any idea?

use `closest()` ... That one goes up the tree untill it hits the argument given. — Daniel, Oct 10 '16 at 18:54
No element having `className` `"active"` appears at `html`? `var $ctrl = $('.xxx');` selects all `.xxx` elements, not only clicked `.xxx` element; `ctrl.closest('.aaa').remove();` would only remove first `.xxx` element. — guest271314, Oct 10 '16 at 19:10
I thought active like hover, but when debugging by Firebug and break, there seems to be no active class (I inspected the clicked hyperlink). — Jack, Oct 10 '16 at 19:13
It does not add a class. `:active` is a state between *click --- release*. Doesn't need `href` to be set. — AA2992, Oct 10 '16 at 19:28
@AnkithAmtange _"Doesn't need href to be set."_ ? How can `a` element be `:active` where no `href` is present as attribute? What would be `:active`? — guest271314, Oct 10 '16 at 19:29
Yeah. Its a state of user activation. Does not depend on href. [**MDN**](https://developer.mozilla.org/en/docs/Web/CSS/:active) .. You can apply it on a div element too for that matter. — AA2992, Oct 10 '16 at 19:31
@AnkithAmtange You are correct http://plnkr.co/edit/lBdOuwO4bZ8vcXpyVPch?p=preview — guest271314, Oct 10 '16 at 19:36
@AnkithAmtange Workaround to save the state? https://jsfiddle.net/u3uhq9m1/1/ — guest271314, Oct 10 '16 at 19:45
Can I get the active hyperlink (last clicked one) for this scenario? Any idea? — Jack, Oct 10 '16 at 19:57
@ClintEastwood Yes, `javascript` at Answer should achieve this, as `this` is passed directly to `deleteRecord`. Is `$.fn.confirmation` defined at `javascript` at Question? Link to documentation? Have also composed a workaround. — guest271314, Oct 10 '16 at 20:12
@AnkithAmtange See http://stackoverflow.com/questions/39966288/how-to-pass-css-active-pseudo-element-to-javascript/39966289#39966289 — guest271314, Oct 10 '16 at 20:32

Zoli Szabó · Answer 1 · 2016-10-10T19:15:32.953

2

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');
});

...

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

edited Oct 10 '16 at 19:15

answered Oct 10 '16 at 18:53

Zoli Szabó

4,366
1
13
19

Normally I was using **$(this).closest()** but this time I have multiple javascript method and after click function I opened a confirmation dialog and then call AJAX in this method. For this reason I cannot use $(this) as it throw an error "not defined" or "null". So, I need to catch the clicked link and I cannot use also class name as there are multiple hyperlink. Any idea? – Jack Oct 10 '16 at 18:59
agreed, @ZoliSzabo's answer is correct, but we won't be able to see what issues you're having with the current context without an example. – autoboxer Oct 10 '16 at 19:02
@autoboxer If `` element has `href` attribute the `document` would either be reloaded, or redirected to another resource at `click`? Where removing parent element would have no affect? – guest271314 Oct 10 '16 at 19:04
It works only the first time because it sends the same id (the first clicked's). Should we need to define some parameter as global? I think we are so close to the solution. Thanks... – Jack Oct 10 '16 at 19:55
I made some assumptions on how the confirmation plugin works. Probably that is the cause of it. Which plugin is that? – Zoli Szabó Oct 10 '16 at 19:58
A simple hack would indeed be to use some global variable to store the current $this and use that global variable in the `deleteRecord` method instead of the method argument. Let me know if you need help with this version and I will update my answer. – Zoli Szabó Oct 10 '16 at 20:01
@ZoliSzabo I use bootstrap confirmation, but it works properly and I have already used in my project. On the other hand, when click Delete button, the confirmation dialog open as much as loop(s). So, I think it is good idea to use a global variables for $this (to catch the first clicked element) and id (the get the clicked element's id). Could you please modify your answer. During this I will also make some tries. Thanks a lot... – Jack Oct 11 '16 at 07:14
@ZoliSzabo Many thanks for your help. I solved the problem with the help of you. Voted+ – Jack Oct 11 '16 at 09:40

score 2 · Answer 2 · answered Oct 10 '16 at 19:17

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


function deleteRecord(el) {

    $.ajax({
    //code omitted for brevity

    success: function (response, textStatus, jqxhr) {
        if (response.success) {             
            el.closest('.aaa').remove();
        }
    });

};

answered Oct 10 '16 at 19:17

guest271314

1
15
104
177

I tried this answer at first, but the code cannot hit deleteRecord method ans seems to hit onclick event as foreach loops. It seems to be so cleaner but I think there is a little mistake. Could you ha a look at please and revise if needed. Thanks a lot. – Jack Oct 10 '16 at 19:38
@ClintEastwood Is `javascript` at Answer wrapped within `$(document).ready()` handler? Is `$.fn.confirmation` defined? – guest271314 Oct 10 '16 at 19:40
Many thanks for your help. I solved the problem with the help of you. Voted+ – Jack Oct 11 '16 at 09:39

Jack · Answer 3 · 2016-10-11T09:49:33.093

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)
{
    <li class="aaa">
        <div class="bbb">
            <div class="ccc">
                <div class="ddd">                   
                    <div class="eee">
                        <ul class="fff">
                            <li>
                                <a class="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 brevity
        onConfirm: function () { deleteRecord(); }
    });




    function deleteRecord() {
        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>

Cannot get parent element using jQuery

3 Answers3

Linked