无法使用jQuery获取父元素 [英] Cannot get parent element using jQuery

问题描述

我有以下的html结构由foreach循环动态创建，并试图删除整个元素通过访问它（活动HYPERLINK）。我尝试了很多不同的方式，但不能达到它。由于整个块（ACTIVE HYPERLINK）被重复，我认为使用超链接的类名是无意义的。我也试图使用a.active但似乎不工作。

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

任何想法？

推荐答案

使用事件delagation， event.preventDefault（） c $ c>单击 元素以防止当前文档重新加载或重定向到其他资源的默认操作;传递当前 event.target ：这到 deleteRecord

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

};

这篇关于无法使用jQuery获取父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！