Remove last dynamically added row
<p>I did some all day learning and I figured out how to add rows dynamically for my form with jquery. But now I can't for the life of me figure out how to remove that last added row.</p>

<pre><code>$('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children('.client').attr('id', 'client' + newNum).attr('name', 'client' + newNum);
                newElem.children('.color').attr('id', 'color' + newNum).attr('name', 'color' + newNum);

                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');

                if (newNum == 5)
                    $('#btnAdd').attr('disabled','disabled');

            });



&lt;form id="myForm"&gt;
    &lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;

&lt;select name="client" id="client" class="client"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;/select&gt;

&lt;input type="text" name="color" id="color" class="color"/&gt;

    &lt;/div&gt;

    &lt;div&gt;
        &lt;input type="button" id="btnAdd" value="Add Row" /&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>And on jsFiddle for your viewing pleasure: <a href="http://jsfiddle.net/P8bTz/1/" rel="nofollow"><strong>Demo</strong></a></p>

<p><strong>Answer</strong> <em>Courtesy of <strong>Blender</em></strong></p>

<pre><code>$('#btnRemove').on('click', function() {
    $('.clonedInput').last().remove();
});
</code></pre>
