current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

I have a click function to make a list of chosen items. Also, I push the chosen items to an array. There is no problem in that part, here is the function. 

$('#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());
    };
});

But I also have a function to remove the clicked item from that list. So I want to remove that item also from array when it is clicked. I tried to use splice method but I can not get the index of the clicked item. Here is the remove function.

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


    $(this).remove();

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

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

});

How can I get the index of the clicked item in the list?

share|improve this question
    
ID should be unique. Use Class to bind events for collection of elements. Better, just provide fiddle – Apul Gupta Oct 26 '14 at 9:48

3 Answers 3

up vote 1 down vote accepted

Firstly, either you make id of items unique or use class instead of id as I done in this solution.

$('#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();
});
share|improve this answer
    
thanks for your help, it is working great! – user3235456 Oct 26 '14 at 10:23
up vote 0 down vote

In function to remove the clicked item from that list, make the following changes:

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

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

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

});
share|improve this answer
    
it doesn't work – user3235456 Oct 26 '14 at 10:22
up vote 0 down vote

It seems like you're way of deleting the item is a little to complex. Why not just use a uniqe ID for each item you're appending and just delete the item by it's ID ?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.