Не удается получить родительский элемент с помощью jQuery

ProgramBox

Не удается получить родительский элемент с помощью jQuery

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть следующая структура html, созданная динамически циклом foreach, и я попытался удалить весь элемент, обратившись к нему из (АКТИВНАЯ ГИПЕРССЫЛКА). Я пробовал много разных способов, но не могу добраться до него. Поскольку весь блок (АКТИВНОЙ ГИПЕРССЫЛКИ) повторяется, я думаю, что бессмысленно использовать имя класса гиперссылки. Я также пытался использовать.active, но, похоже, не работает.

 @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>

Вот несколько примеров моих попыток:

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

Есть идеи?

1. используйте closest() … Этот элемент поднимается по дереву, пока не попадет в указанный аргумент.

2. @guest271314 Каково решение? Какие-либо предложения, пожалуйста?

3. Он не добавляет класс. :active это состояние между щелчком мыши и выпуском . Не нужно href устанавливать.

4. Да. Это состояние активации пользователя. Не зависит от href. MDN .. Вы также можете применить его к элементу div, если на то пошло.

5. @AnkithAmtange Обходной путь для сохранения состояния? jsfiddle.net/u3uhq9m1/1

Ответ №1:

ОБНОВЛЕННЫЙ ОТВЕТ

 $('.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) {
...

ОРИГИНАЛЬНЫЙ ОТВЕТ

Если вы хотите, чтобы блок удалялся при нажатии на <a> элемент, вам необходимо назначить обработчик для click события:

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

1. Обычно я использовал $(this).closest() , но на этот раз у меня есть несколько методов javascript, и после щелчка функции я открыл диалоговое окно подтверждения, а затем вызвал AJAX в этом методе. По этой причине я не могу использовать $(this), поскольку он выдает ошибку «не определено» или «null». Итак, мне нужно перехватить ссылку, по которой вы нажали, и я не могу также использовать имя класса, поскольку существует несколько гиперссылок. Есть идеи?

2. согласен, ответ @ZoliSzabo верен, но мы не сможем увидеть, какие проблемы у вас возникли с текущим контекстом без примера.

3. @autoboxer Если <a> элемент имеет href атрибут document , он будет либо перезагружен, либо перенаправлен на другой ресурс по адресу click ? Где удаление родительского элемента не повлияет?

4. Это работает только в первый раз, потому что он отправляет тот же идентификатор (первый щелчок). Нужно ли нам определять какой-либо параметр как глобальный? Я думаю, что мы так близки к решению. Спасибо…

5. Я сделал некоторые предположения о том, как работает плагин подтверждения. Вероятно, это и есть причина этого. Что это за плагин?

Ответ №2:

Используйте задержку события event.preventDefault() в элементе, click <a> чтобы предотвратить действие по умолчанию при перезагрузке текущего документа или перенаправлении на другой ресурс; передать 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();
        }
    });

};

1. Сначала я попробовал этот ответ, но код не может попасть в метод deleteRecord, который, похоже, попадает в событие onclick как циклы foreach. Кажется, это так чище, но я думаю, что есть небольшая ошибка. Не могли бы вы взглянуть, пожалуйста, и при необходимости пересмотреть. Большое спасибо.

2. javascript Ответ @ClintEastwood завернут в $(document).ready() обработчик? $.fn.confirmation Определено?

3. Большое спасибо за вашу помощь. Я решил проблему с вашей помощью. Проголосовал

Ответ №3:

Вот окончательный ответ, который работает как шарм с помощью @ZoliSzabo и guest271314. Большое спасибо за вашу помощь и предложения…

 @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>