减少计数器时，删除div

Question

我在一张表格上有反击：

当用户单击加号/减号图标时，计数器会正确递增和递减。我想要做的是在用户单击加号时添加更多表单元素，然后在选择减号时删除它们。这是我的HTML：

<div class="label01">Total attendees:</div>
  <div class="field01">
    <input name="qty" type="text" size="4" value="1" readonly="readonly" style="background:#999;"/>
     <img src="/assets/images/minus_icon.png" id="dec">
     <img src="/assets/images/plus_icon.png" id="inc">
     (include yourself in this count)
   </div>
   <div class="additional"></div>

我的jquery：

$(document).ready(function() 
{  
    $(function() {
      $("#inc").click(function() { 
        var num = $(":text[name='qty']").val(function(i, v) { 
                       return Number(v) + 1;
                  }).val();
        $(this).addClass ('c' + num);
        var incrementVar = num;
        $('.additional').append("<div id='a_'" + num + ">Test</div>");
      }); 

      $("#dec").click(function() {      
        $(":text[name='qty']").val(function(i, v) { 
            if(Number(v) > 1){              
                return Number(v) - 1; 
            }
            else{
                return 1;
            }
            $("div").removeClass("a_" + Number(v) - 1);
        });
      });  
    });
});

上面的代码正确附加测试div，但不会删除。有什么建议吗？

Answer 1

您正在使用removeClass（）。你应该使用remove（）。

$("#a_" + Number(v) - 1).remove();

编辑：查看代码，您无法访问代码：

$("#dec").click(function() {      
    $(":text[name='qty']").val(function(i, v) { 
        if(Number(v) > 1){              
            return Number(v) - 1; 
        }
        else{
            return 1;
        }
            // unreachable
        $("div").removeClass("a_" + Number(v) - 1);
            // should be
            $("#a_" + Number(v) - 1).remove();
    });
  });  

编辑：

我发现您的代码出了什么问题 $('.additional').append("<div id='a_'" + num + ">Test</div>");

应该是

$('.additional').append("<div id='a_" + num + "'>Test</div>");

这是一个有效的jsfiddle：http://jsfiddle.net/TH79T/

Answer 2

尝试：

$("#inc").click(function() {
   $("#additional").append("<div></div>");
});

$("#dec").click(function() {
   $("#additional").last().remove();
});