模态仅适用于一个请求

Question

当我在愿望清单消息中添加项目时，我正在使用模式显示消息，但是当模式消失时，再次单击以从愿望清单中删除项目时，消息不会以模式显示。消息来自json响应。当status = 2时，我要在模式中显示消息“项目已从愿望清单中删除”，然后模式消失。再次，当status = 3时，我想显示消息，'项目以模态添加到愿望清单中，然后模态消失。我的模态仅适用于那些人。

刀片代码：

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
     <div class="modal-content" id="displyMessage">

      </div>
    </div>
   </div>

<!--     <div class="alert alert-success" id="success-alert" style="display:none">

    </div> -->
    <h3 class="h3"></h3>
    <div class="row">
      @foreach($data as $value)
        <div class="col-md-3 col-sm-6">
            <div class="product-grid3" >
                <div class="product-image3">
                      <?php 
                      if (Session::has('userid')) 
                      {
                      $userid=Session::get('userid');

                      $checklist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userid,$value->sub_id]);
                      ?>
                      <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate" 
                      <?php if($checklist)
                      { ?>style="float:right;color:#FBA842;"<?php } else { ?>style="float:right;color:grey;"<?php } ?>></i></a>
                      <?php
                      }
                      else
                      {
                      $wishliststatus=Session::put('status','1');
                      ?>
                      <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate"  style="float:right;color:grey;"></i></a>
                      <?php } ?>

                    <a href="/productdetail{{ $value->sub_id }}">
                        <img class="pic-1" src="{{asset('images/'.$value->image)}}">
                    </a>

                    <!-- <span class="product-new-label"></span> -->
                </div>
                <div class="product-content">
                    <h3 class="title"><a href="#">{{ $value->name_of_subcategory }}</a></h3>
                    <div class="price">
                       Price : {{ $value->discount_price }}
                        <span>{{ $value->price }}</span>
                    </div>
                    <ul class="rating">
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star disable"></li>
                        <li class="fa fa-star disable"></li>
                    </ul>
                </div>

            </div>
        </div>
        @endforeach
    </div>
</div>

控制器：

 public function add_to_wishlist(Request $req)
    {
         $userId=Session::get('userid');
         if(empty($userId))
         {
            return response()->json(['status'=> 1]);
         }
         else
         {
            $checkWishlist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userId,$req->sub_id]);
             if($checkWishlist)
             {
               DB::table('wishlist')->where('user_id',$userId)->where('product_id',$req->sub_id)->delete();

               return response()->json(['status'=> 2,'message'=>'item is removed from wishlist']);              
             }
             else
             {
              DB::table('wishlist')->insert(['user_id'=>$userId,'product_id'=>$req->sub_id]);

              return response()->json(['status'=> 3,'message'=>'item is added in wishlist']);
             }
         }
    }

ajax：

<script type="text/javascript">
  $(document).ready(function(){
    jQuery.noConflict();
  $('.sub').click(function(e) { 
    var sub_id=$(this).attr('data-id');
    var input=$(this).prev();
    e.preventDefault()
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
         jQuery.ajax({

                  url: "{{ url('/add-to-wishlist') }}",
                  method: 'get',
                  data: {
                     sub_id: sub_id,
                  },
                  success: function(result){
                    if(result.status==1)
                    {
                       window.location.href="/login";
                    }
                    else if(result.status==2)
                     {
                        //$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});

                        $('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("add");
                        $('a[data-id="' + sub_id + '"] > i.whishstate').addClass("remove");

                        $(".modal-content").html(result.message);
                        $(".modal").modal("show");

                        setTimeout(function() {
                           $('.modal').remove();
                           $('.modal-backdrop').remove();
                        }, 2000); 

                     }
                     else if(result.status==3)
                     {
                        //$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});

                        $('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("remove");
                        $('a[data-id="' + sub_id + '"] > i.whishstate').addClass("add");

                          $(".modal-content").html(result.message);
                          $(".modal").modal("show");

                         setTimeout(function() {
                           $('.modal').remove();
                           $('.modal-backdrop').remove();
                        }, 2000);


                     }
                  }});

  });
 });

</script>