Jquery 减少计数器时，删除div

我在表格上有一个计数器，看起来像：

当用户单击加号/减号图标时，计数器将正确递增和递减。我试图做的是在用户单击加号时添加更多表单元素，然后在选择减号时删除它们。这是我的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);
        });
      });  
    });
});

$（文档）.ready（函数（）
{  
$（函数（）{
$（“#inc”）。单击（函数（）{
var num=$（“：text[name='qty']”）.val（函数（i，v）{
返回编号（v）+1；
}).val（）；
$（this.addClass（'c'+num）；
var incrementVar=num；
$（'附加'）。附加（“测试”）；
}); 
$（“#dec”）。单击（函数（）{
$（“：text[name='qty']”.val（函数（i，v）{
如果（数（v）>1）{
返回编号（v）-1；
}
否则{
返回1；
}
$（“div”）.removeClass（“a_u”）+数字（v）-1；
});
});  
});
});

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

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

$（“#a"+数字（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'）。追加（“测试”）

应该是

$（'.additional'）。追加（“测试”）

下面是一个正在工作的JSFIDLE:
您正在使用removeClass（）。您应该使用remove（）

$（“#a"+数字（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'）。追加（“测试”）

应该是

$（'.additional'）。追加（“测试”）

下面是一个有效的JSFIDLE:
试试：

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

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

$（“#inc”）。单击（函数（）{
$（“#附加”）。追加（“”）；
});
$（“#dec”）。单击（函数（）{
$（“#附加”）.last（）.remove（）；
});
试试：

$（“#inc”）。单击（函数（）{
$（“#附加”）。追加（“”）；
});
$（“#dec”）。单击（函数（）{
$（“#附加”）.last（）.remove（）；
});
Your.removeClass调用不可访问，但这不是唯一的问题Your.removeClass调用不可访问，但这不是唯一的问题谢谢@kdg123的建议。我使用了
remove（）
函数而不是
removeClass
，并且移动了调用，但仍然没有删除我新创建的div。以下是更新版本：感谢@kdg123的建议。我使用了
remove（）
函数而不是
removeClass
，并移动了调用，但仍然没有删除新创建的div。以下是更新版本：