javascript - 如何通过按钮删除数据

Question

我现在完成的是，当我单击“添加到我的住宿”按钮时，它将显示名称和价格数据，并且会自动切换到删除按钮，然后再次单击另一个插件以显示另一个名称和价格数据。现在，如果我按下第一个“添加到我的住宿”的删除按钮，它将删除我按下添加的每个按钮上的两个数据。我的目标是根据按钮 ID 删除数据，就像我想删除第一个“添加到我的住宿”按钮上的数据一样，它只会删除第一个数据 我的 JS 代码用于删除它位于(文档)之外。ready

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);