JQuery, проблема с удалением DOM на элементе LI - PullRequest
Новая
       10

JQuery, проблема с удалением DOM на элементе LI

0 голосов
/ 26 мая 2020

Прежде чем вы подумаете, что на этот вопрос уже был дан ответ (который, я полагаю, технически имеет), позвольте мне указать, что любое другое сообщение, касающееся этого типа проблемы, имеет другой контекст, и поэтому ответ не соответствует моему проблема.

В любом случае, для упрощения ситуации у меня есть элемент UL с кучей LI внутри него, которые генерируются с помощью foreach l oop через объект JSON, предоставленный объекту страница. Я хочу иметь возможность удалять строки. Пока все очень стандартно. Я написал очень стандартный JQuery / JS для решения этой задачи, но по какой-то особенной причине часть скрипта работает правильно, а часть - нет (часть удаления DOM). Я пробовал написать его по крайней мере четырьмя разными способами, используя разные функции для решения задачи, даже попытался переместить оператор в разные области функции, а также альтернативное размещение самих функций.

I также хочу сказать, что, поскольку я удаляю отдельные строки, все они идентифицируются динамически сгенерированным идентификатором, который (я подозреваю), возможно, связан с проблемой, с которой я столкнулся.

Вот сам код, начиная с кнопки для запуска функции; 

<button type="button" onclick="unsave({{$savedpost->id}})" class="btn float-right btn-dark my-auto" id="unsaveBTN{{$savedpost->id}}">Unsave</button>

Как видите, здесь используется синтаксис лезвия для динамически генерируемых идентификаторов.

Вот фактический сценарий JQuery, который вызывается кнопка 

            <script defer>
                function unsave(savedID){
                    // /saved/{savedid}/unsave
                    var saved = document.getElementById(savedID);
                    console.log(savedID);
                    $.ajax({
                        type: 'POST',
                        url: '/'+savedID+'/ajax',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: 'json',
                        success: function(result) {
                            // append to popupDisplayList
                            if(result.success) {
                                saved.remove();
                                $('#popupDisplayList').append($('<li class="list-group-item alertGroup"><div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Success!</strong> '+result.success+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></li>'));
                            } else if (result.error) {
                                $('#popupDisplayList').append($('<li class="list-group-item alertGroup"><div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>Error!</strong> '+result.error+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></li>'));
                            } else { return }
                        }
                    });
                };
            </script>

Скрипт в том виде, в каком он есть у меня, совершенно очевидно, не очень хорошо оптимизирован, но это текущее состояние скрипта после попытки нескольких других решений, сначала это был только один скрипт и оптимизирован.

В одной из версий скрипта я попытался добавить класс в div в исходной функции, а затем d выбрав его, если переменная с именем success была возвращена как истина, что произойдет, когда ответ AJAX вернется как result.success. Затем я бы удалил все элементы с этим классом. Очевидно, это очень окольный путь, но я уже отчаялся.

Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ:

Вот код

imagepicture_link}}">

1 Ответ

1 голос
/ 27 мая 2020

Изменить кнопку на: 

<button type="button" class="btn float-right btn-dark my-auto unsavebtn" data-postid="{{$savedpost->id}}" id="unsaveBTN{{$savedpost->id}}">Unsave</button>

Изменить сценарий: 

jQuery("body").on("click",".unsavebtn", function(e)
{
    e.preventDefault();

    var postid = jQuery(this).data("postid");
    var thisElem = jQuery(this);

    $.ajax({
         type: 'POST',
         url: '/'+postid+'/ajaxsave',
         headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         },
         dataType: 'json',
         success: function(result) {
             // append to popupDisplayList
             if(result.success) {
                  thisElem.parents("li.list-group-item").remove()
                  $('#popupDisplayList').append($('<li class="list-group-item alertGroup"><div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Success!</strong> '+result.success+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></li>'));
                  success = true;
             } else if (result.error) {
                   $('#popupDisplayList').append($('<li class="list-group-item alertGroup"><div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>Error!</strong> '+result.error+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></li>'));
             } else { return }
        }

    });
});
...