CODEWITHSUNDEEP
javascriptphpjquery
Shehary
Shehary

Reputation: 9992

need help to add and remove items from list with jQuery

I'm trying to add and remove sub items with price calcuation with following piece of jQuery

$('.sub_item-plus-button').click( function() {
    var li_id = $(this).closest('li').attr('id');
    var productname = $('#'+li_id+' > .name').text();
    var productPrice = $('#'+li_id+' .price').text();//alert(productPrice);
    var parent_cat = $('#temp > #main_category').text();
    var price = $('#'+li_id+' .price').text();//alert(price);    
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdname[]" value="'+productname+'" />');
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdprice[]" value="'+productPrice+'" />');
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdparent[]" value="'+parent_cat+'" />');
    //$("#product-form").append('<input type="text" name="sub_category" value="'+price+'" />');
    $('li#'+li_id).append('<li id="'+li_id+'" class="extras"><span class="name">1</span><span class="price">1.00</span><span class="right"><a href="#" onclick="ri(\''+li_id+'\')" class="removeButtonLink"><span class="icon-minus-sign-empty">Re</span></a></span></li>');
    set_total_price(productPrice);      
    });

And HTML is

            <ul id="sub_item">                  
            <div class="addExtrasTotal"><span>Total</span> &pound;<span class="totalPrice">0.00</span></div>
                <li id="ext1" class="popextra" style="clear: both;"><span class="column6 name">Anchovies</span>
                    <span class="column6 right">&pound; <span class="price">1.00</span>
                        <a class="button item-plus" href="JavaScript: void(0);"><span class="sub_item-plus-button">+</span></a>
                    </span>
                </li>
                <li id="ext2" class="popextra" style="clear: both;"><span class="column6 name">Artichokes</span>
                    <span class="column6 right">&pound; <span class="price">1.00</span>
                        <a class="button item-plus" href="JavaScript: void(0);"><span class="sub_item-plus-button">+</span></a>
                    </span>
                </li>
            </ul>

The Problem with I need help is;
1.When Adding, first time, it adds 1 item, 2nd time, it add 2 items instead of 1 and 3rd time click it adds 3 items.
2.When removing items, it removes all the items on single click in one go but remove price of single item from total and rest of the sub items price still added in total.
Price & item remove function is;

function ri(li_id){
    //alert(li_id);
    var price = $('#'+li_id+' .price').text(); //alert(price);
    var extrass = $('#'+li_id+' .extras').html(); alert(extrass);
    $('#'+li_id+' .extras').remove();
    set_total_price_minus(price);

}

Really appericate the help to figure out the problem and solution.

Regards

Upvotes: 0

Views: 98

Answers (1)

Vince
Vince

Reputation: 3286

The issue is due to id ambiguity. You are assigning the same id attribute to multiple elements in the $('.sub_item-plus-button').click() function, so jQuery gets confused when trying to select these elements by id. The id attribute is meant to be unique, so only a single element should be assigned a given id.

Upvotes: 2

Related Questions