javascript - Jquery在不重新加载页面的情况下无法删除div

Question

我可以通过单击“添加到候选列表按钮”将一个行为添加到我的候选列表中。然后可以通过单击叉从候选名单中删除行为。

但是，将一个动作添加到候选名单后，该动作只有在页面刷新时才会删除。我需要能够使用 jquery prepend 和 remove 方法从候选列表中动态添加和删除行为，而无需刷新页面。

添加到候选清单按钮

<a href="javascript:void(0);" data-id="{{ $act->id }}" class="profile-enquiry-btn add-to-shortlist" role="button">ADD TO SHORTLIST</a>

从候选名单中删除按钮

<a href="javascript:void(0);" data-id="{{ $item['id'] }}" class="removeact remove-from-shortlist">&times;</a>

$(".add-to-shortlist").click(function (e) {
        e.preventDefault();
        var ele = $(this);

        $.ajax({
            url: '{{ url('add-to-shortlist') }}' + '/' + ele.attr("data-id"),
            method: "get",
            data: {_token: '{{ csrf_token() }}'},
            dataType: "json",
            success: function (response) {
                if(response.errors) 
                {
                    toastr["info"]("This act has already been added to your shortlist", "Error");
                }
                else 
                {
                    var data = response.data;   
                    var $id;
                    var $name;
                    var $slug;
                    var $description;
                    var $genres;
                    var $genrenames = '';
                    var $startingprice;
                    var $members;
                    var $image;
                    var $rating;

                    $.each(data, function(i, data){
                        $id            = data.id;
                        $name          = data.name;
                        $slug          = data.slug;
                        $description   = data.description;
                        $genres        = data.genres;
                        $startingprice = data.startingprice;
                        $members       = data.members;
                        $image         = data.image;
                        $rating        = data.rating;
                    });
                    
                    $.each($genres, function(i, $genres){
                        console.log($genres.name);
                        $genrenames += $genres.name+', ';
                    });
                    
                    $('#myshortlist').prepend('<div class="popular-act" id="shortlist-item-'+$id+'"><div class="popular-act-img"><a href="/act/'+$slug+'"><img src="http://localhost:8000/storage/'+$image['id']+'/'+$image['file_name']+'" alt="'+$image['name']+'"></a><a href="javascript:void(0);" data-id="'+$id+'" class="removeact remove-from-shortlist">&times;</a></div><div class="popular-act-details"><div class="popular-act-top-section"><h3 class="popular-act-title"><a href="/act/">'+$name+'</a></h3><div class="popular-act-star-rating">'+$rating+'</div></div><div class="popular-act-description"><div class="popular-act-short-description">'+$genrenames.slice(0,-2)+'</div><p>insert description</p></div><div class="popular-act-bottom-section"><div class="popular-act-price"><div class="popular-act-price-heading">FROM</div><div class="popular-act-price-figure">£'+$startingprice+'</div></div><div class="popular-act-members"><div class="popular-act-members-heading">MEMBERS</div><div class="popular-act-members-figure">'+$members+'</div></div><div class="popular-act-view-profile-button"><a href="/act/'+$slug+'">VIEW PROFILE</a></div></div></div></div>');

                    toastr["success"]("Act added to shortlist", "Success");
                }
            }
        });
    });

$(".remove-from-shortlist").click(function (e) {
        alert('Remove clicked');
        e.preventDefault();
        var ele = $(this);

        $.ajax({
            url: '{{ url('remove-from-shortlist') }}' + '/' + ele.attr("data-id"),
            method: "get",
            data: {_token: '{{ csrf_token() }}'},
            dataType: "json",
            success: function (response) {
                if(response.errors) 
                {
                    toastr["info"]("A unknown error occured, please try again. Thank you.", "Error");
                }
                else 
                {
                    var data = response.data;  
                    $('#shortlist-item-'+data).remove();
                    toastr["success"]("Act removed from shortlist.", "Success");
                }
            }
        });
    });

标签： javascriptphpjqueryajaxlaravel