Question

I have counter on a form that looks like:

When the user clicks the plus/minus icons, the counter increments and decrements correctly. What I am trying to do is add more form elements when the user clicks the plus sign, and then remove them if they select the minus sign. Here is my 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>

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

The code above is correctly appending the test divs, but will not remove. Any suggestions?

Answer 1

You’re using removeClass(). You should be using remove().

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

Edit: Looking at your code, you have unreachable code:

$("#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();
    });
  });  

edit:

I found what was wrong with your code.
$('.additional').append("<div id='a_'" + num + ">Test</div>");

should be

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

Here is a working jsfiddle: http://jsfiddle.net/TH79T/