javascript - 从javascript中的数组中删除单击的项目

Question

我有一个点击功能来制作所选项目的列表。另外，我将所选项目推送到数组中。那部分没有问题，这里是函数。

$('#addToCartButton2').click(function(){  

    var toAdd=$("#chooseItem2 option:selected").text();
    var itemNbr2=$("#itemNbr2").val();

    if(toAdd !== defaultSelectFormText && itemNbr2 >=1){
        $('#defaultText').remove();
        $('.col-md-5').append('<p id="items">' + itemNbr2 + ' Adet ' + toAdd + '<span class="extra">Sipariş listesinden çıkarmak için tıklayın!</span>' + '</p>');
        ordersArray.push(itemNbr2 + ' Adet ' + toAdd);
        alert(ordersArray.toString());
    };
});

但我还有一个功能可以从该列表中删除单击的项目。所以我想在单击该项目时也从数组中删除该项目。我尝试使用拼接方法，但无法获取单击项目的索引。这是删除功能。

$(document).on('click', '#items', function() {


    $(this).remove();

    var index = ordersArray.indexOf($(this).val());

    alert(index);
    if (index > -1) {
        ordersArray.splice(index, 1);
    }

}); 

如何获取列表中被点击项目的索引？

Answer 1

首先，要么使项目的 id 唯一，要么使用类而不是 id，就像我在此解决方案中所做的那样。

$('#addToCartButton2').click(function(){  

    var toAdd=$("#chooseItem2 option:selected").text();
    var itemNbr2=$("#itemNbr2").val();

    if(toAdd !== defaultSelectFormText && itemNbr2 >=1){
        $('#defaultText').remove();
        $('.col-md-5').append('<p class="items"><span>' + itemNbr2 + ' Adet ' + toAdd + '</span><span class="extra">Sipariş listesinden çıkarmak için tıklayın!</span>' + '</p>');
        ordersArray.push(itemNbr2 + ' Adet ' + toAdd);
        alert(ordersArray.toString());
    };
});

$(document).on('click', '.items', function() {

    var index = ordersArray.indexOf($('span:first', this).text());

    alert(index);
    if (index > -1) {
        ordersArray.splice(index, 1);
    }

    $(this).remove();
});