需要帮助以使用jQuery从列表中添加和删除项目

Question

我正在尝试使用以下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);      
    });

HTML是

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

我需要帮助的问题是；
1.添加时，第一次添加1项，第二次添加2项，而不是1次，第三次单击则添加3项。
2.删除项目时，它会一键删除所有项目，但会从总计中删除单个项目的价格，而剩余的子项目价格仍会总计添加。
价格和项目删除功能是；

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

}

真正享受帮助找出问题和解决方案。

问候

Answer 1

该问题是由于id含糊。 您正在为$('.sub_item-plus-button').click()函数中的多个元素分配相同的id属性，因此jQuery在尝试通过id选择这些元素时会感到困惑。 id属性应具有唯一性，因此仅应为单个元素分配给定的id。