Question

我现在所要做的是，当我单击“添加到我的住宿”按钮时，它将显示名称和价格数据，它将自动切换到删除按钮，然后再次单击以显示另一个名称，以显示其他名称和价格数据。现在，如果我按下第一个“添加到我的住宿”中的删除按钮，它将删除我按下添加的每个按钮上的两个数据。我的目标是根据按钮的ID删除数据，就像我要删除的数据一样。我的第1个“添加到我的住宿”按钮上的数据只会删除第1个数据我的JS删除代码位于（文档）之外。就绪

function Remove(id) {
            console.log("call remove");

            $('li.price').each(function (index, object) {
                var id2 = $(object).data('addon-id');
                console.log(id);
                if (id2 === id2) {
                    $(object).remove();
                }
            });
            $(this).addClass('is-hidden');
        $('.addons[data-addon-id="' + id + '"]').removeClass('is-hidden');
        }

我获取获取数据的代码添加到我的停留按钮

$(document).ready(function(){
    $(".addons").on("click", function(event) {
        event.preventDefault();


        var $this = $(this);
        var id = $(this).data('addon-id');
        name = $(this).data('name');
        price = $(this).data('price');

        console.log(id);

        $(this).addClass('is-hidden');
        $('.removebtn[data-addon-id="' + id + '"]').removeClass('is-hidden');
        if(id != '')

            {

                    $.ajax(
                {
                    type:"POST",
                    url : "Pages/addonajax",
                    data:{id:id,
                        name:name,
                        price:price},


                    success:function(data)
                    {
                            console.dir(data);
                            if (data) {

                            var item = $('<li data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
                                         $("#test1").append(item);
                               Total();

                        }
                        else {

                        } 
                    }
                });
      }      
});

按钮上的代码

<button data-name = "Airport Transfer" data-price = "4300"  class="addons addon-btn trans_200" data-addon-id ="1">ADD TO MY STAY</button>
<button class="removebtn remove-btn  is-hidden trans_200" data-addon-id ="1" onclick="Remove(1)" value="Remove">Remove</button>

Answer 1

您的问题在这里：

if (id2 === id2) {
    $(object).remove();
}

id2将始终等于自身，因此您将始终调用$(object).remove();

您需要将id2与id进行比较

if (id2 === id) {
    $(object).remove();
}

编辑

列表项循环中也有问题：

var id2 = $(object).data('addon-id');

您的列表项没有data-addon-id属性

在创建列表项时将data-addon-id放在列表项中：

var item = $('<li data-addon-id="' + id + '" data-itemprice="'+price+'" class = "price">'+name+' : '+price+'</li>');
$("#test1").append(item);

如何根据按钮删除数据

1 个答案: