删除最后一项

Question

On click of a button, result appends to another div with the total increasing on each click. 单击按钮后，结果将追加到另一个div，且每次单击的总数增加。

When Remove Last button is clicked it removes the appended div but does not adjust the total. 单击“删除最后一个”按钮时，它将删除附加的div，但不调整总数。

I've looked all over for a function with no luck. 我四处寻找没有运气的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Remove last</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


  </head>
  <body onLoad="renderTime();">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4" id="printarea" >
                <div id="print-container">
                    <div class="item"></div>
                    <div class="total"></div>
                </div>
            </div>
            <div class="col-xs-8">
                <ul class="final">
                    <li class="remove"><a href="#"><input type="submit" value="Remove Last"  class="print-btn remove-item"></a></li>
                    <li class="remove"><a href="#"><input type="submit" value="Remove All" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></a></li>
                </ul>
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="content">
                        <ul class="sub-menu">
                            <li><a href="#"><button class="menu item1">Item 1</button></a></li>
                            <li><a href="#"><button class="menu item2">Item 2</button></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">

        //add item
        $('.item1').click(function(){
           $('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');

           counter();
        });
        $('.item2').click(function(){
           $('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');

           counter();
        });

        //remove last item
        $('.remove-item').click(function(){
            $(".delete:last").remove();
        });
    </script>

    <script type="text/javascript">
        function refresh() {

            setTimeout(function () {
                location.reload()
            }, 100);
        }
    </script>

        <script type="text/javascript">

        var counter = function() {

            var total = 0;

            $(".skill").each(function() {

                total += +$(this).text();
            });

            $('.total').text('Total: ' + total);
        };

    </script>
  </body>
</html>

Answer 1

You need to call counter(); 您需要调用counter(); method after the element is removed. 元素删除后的方法。

//remove last item
$('.remove-item').click(function() {
    $(".delete:last").remove();

    counter();
});

Answer 2

That is because you have not called counter function after removing element. 这是因为删除元素后尚未调用计数器功能。 you need to call it in remove item clicked handler: 您需要在删除项目点击处理程序中调用它：

 $('.remove-item').click(function(){
        $(".delete:last").remove();
        counter();
 });

You should also parse the values while getting the text before calculating total: 在计算总数之前，还应该在获取文本时解析值：

        var total = 0;

        $(".skill").each(function() {

            total += + parseInt($(this).text() , 10);
        });

        $('.total').text('Total: ' + total);

删除最后一项

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-05-02 08:09:15

解决方案2
0 2016-05-02 08:09:19

删除最后一项

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-05-02 08:09:15

解决方案2 0 2016-05-02 08:09:19

解决方案1
0 已采纳 2016-05-02 08:09:15

解决方案2
0 2016-05-02 08:09:19