jquery - 减少计数器时，删除 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();
});