时间戳

首页 > 解决方案 > JQuery，LI 元素上的 DOM 删除问题

javascript - JQuery，LI 元素上的 DOM 删除问题

问题描述

在您认为之前已经回答过这个问题之前（我猜它在技术上已经回答过），让我指出与此类问题相关的任何其他帖子都具有不同的背景，因此答案不适合我的问题。

无论如何，为了简化情况，我有一个 UL 元素，其中包含一堆 LI，这些 LI 由 foreach 循环通过提供给页面的 JSON 对象生成。我希望能够删除行。到目前为止，一切都非常标准。我已经编写了一些非常标准的 JQuery/JS 来处理这个任务，但是由于一些特殊的原因，脚本的一部分正常运行，而一部分却没有（DOM 删除部分）。我尝试过至少 4 种不同的方式编写它，使用不同的函数来完成任务，甚至尝试将语句移动到函数的不同区域，以及函数本身的交替放置。

我还想说，由于我正在删除单个行，它们都由动态生成的 ID 标识，这（我怀疑）可能与我面临的问题有关。

这是代码本身，从启动功能的按钮开始；

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

如您所见，动态生成的 id 使用刀片语法。

这是按钮调用的实际 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 添加一个类，然后如果名为 success 的变量返回 true（当 AJAX 响应以 result.success 返回时会发生这种情况），则将其删除。然后我会删除该类的所有项目。显然这是一个非常迂回的方式，但我在这里变得绝望。

任何帮助将不胜感激。

编辑：

这是代码

<li class="pl-4 list-group-item" id="{{$savedpost->id}}">
    <div class="row justify-content-between">
       <div class="row pl-4">
            <img class="img-fit-fluid" src="/storage/images/{{$savedpost->picture_link}}" alt="Saved post image">
            <div class="row flex-column">
                 <h5 class="text-dark pl-5 align-middle">{{$savedpost->name}}</h5>
                 <p class="text-secondary pl-5 align-middle">{{$savedpost->desc_short}}</p>
            </div>
         </div>
      <div class="btn-group" role="group">
           <a href="/{{$savedpost->id}}" class="btn float-right btn-secondary my-auto">View</a>
           <button type="button" onclick="unsave({{$savedpost->id}})" class="btn float-right btn-dark my-auto" id="unsaveBTN{{$savedpost->id}}">Unsave</button>
       </div>
  </div>
</li>

标签： javascriptjquerylaravellaravel-blade

解决方案

将按钮更改为：

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

    });
});

推荐阅读