JQuery with .live & .remove I can't figure this out
<p>Here is a <a href="http://jsfiddle.net/lamontc/UhQuR/3/" rel="nofollow">jsfiddle</a> that is working except for the function I'm trying to figure out.</p>

<p>I have this code that <code>.appends</code> a <code>.table</code> to a form on a value change in the <code>.qty</code> field. I'm trying to figure out 2 things. </p>

<p>The first is that only ONE extra line may be available at any time.</p>

<p>The second would be to remove that one extra line when the <code>#extraDiscount</code> has <code>.focusin</code>.</p>

<h2>Here's the JQuery.</h2>

<pre><code>    var TheOrderLine = ('&lt;table class="orderLine formFont" width="400" hspace="0" vspace="0"&gt;&lt;tr&gt;&lt;td width="75" valign="top"&gt;Name:&lt;input class="ProductName" type="text" size="6"&gt;&lt;/td&gt;&lt;td width="75" valign="top"&gt;WholeSale:&lt;input class="WholeSalePrice" type="text" size="6"&gt;&lt;/td&gt;&lt;td width="75" valign="top"&gt;QTY:&lt;input class="qty addLine" type="text" size="6"&gt;&lt;/td&gt;&lt;td width="75" valign="top"&gt;L/Total:&lt;input class="lineTotal" type="text" size="6"&gt;&lt;br&gt;&lt;/td&gt;&lt;td width="100" valign="top"&gt;&lt;div id="delButton"&gt;DEL&lt;/div&gt;&lt;/td&gt;&lt;/table&gt;');

$(document).ready(function(e) {
 //This adds the Line Totals 
});function updateTotal() {
    var totalA = 0;
    $('.lineTotal').each(function() { totalA += parseFloat($(this).val()) || 0; });
    $('#productTotals').val(totalA.toFixed(2));
}
 //This is the autocomplete and is working fine
$(function() {
$('.ProductName').val("");
$('.WholeSalePrice').val("");

$(document).ready(function(e) {
    $('.ProductName').live({
        focusin: function() {
            $(this).autocomplete({
                source: "PRODUCT.SEARCH.QUERY.php",
                minLength: 2,
                autoFocus: true,
                select: function(event, ui) {
                    var $tr = $(this).closest('tr');
                    $tr.find('.ProductName').val(ui.item.ProductName);
                    $tr.find('.WholeSalePrice').val(ui.item.WholeSalePrice);
                    }
                })
                }
            });
        }); 
});

// Used a CSS button for the Delete line
$("#orderFormDiv_Lines").delegate("#delButton", "click", function () {
    $(this).closest('.orderLine').remove();
    updateTotal(); /* this recalculates the total after an item is deleted */
});
// Removes all lines
     $("#removeAll").click(function () {
     $('.orderLine').remove();
     $('#productTotals input[type="text"]').val('');
     updateTotal();
    });


$(document).ready(function(e) {
    $('.qty').live({
        change: function() {
/* This add the numbers for lineTotal field */    

            var qty = $(this).val();
            var $tr = $(this).closest('tr');    
            var WholeSalePrice = $('.WholeSalePrice:eq(0)', $tr).val();

            var lineTotal = parseFloat(qty * WholeSalePrice) || 0;
            $('.lineTotal:eq(0)', $tr).val(lineTotal.toFixed(2));;
            updateTotal();

// this is the line that I need to add the if function on but I can't figure out how to find the  extra empty table rows that may exist and also not let 

           $('#orderFormDiv_Lines').append(TheOrderLine);

         // I'm thinking something along this line here but I can't grasp the .live concept for grabbing the empty .orderlines.


            /*   
            if ('.orderLine':empty) &amp;&amp; &gt; 1; {

            $('.orderLine').remove();


            } else {

                 $('#orderFormDiv_Lines').append(TheOrderLine);
            }
         */     }


        })
// Added this in case the Delete All button is used.        
        $('#addLine').click(function(){
        $('#orderFormDiv_Lines').append(TheOrderLine); 
    });
});
</code></pre>

<h2>Here's HTML form....</h2>

<pre><code>    &lt;html&gt;&lt;head&gt;&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;hr&gt;
&lt;form action="&lt;?php echo $PHP_SELF;?&gt;" method="post"&gt;
&lt;div id="orderFormContent"&gt;
&lt;div id="orderFormDiv_Lines"&gt;

&lt;table class="orderLine formFont" width="400" hspace="0" vspace="0"&gt;
   &lt;tr&gt;
    &lt;td width="75" valign="top"&gt;
Name:&lt;input class="ProductName" type="text" size="6"&gt;&lt;/td&gt;
    &lt;td width="75" valign="top"&gt;
WholeSale:&lt;input class="WholeSalePrice" type="text" size="6"&gt;&lt;/td&gt;
    &lt;td width="75" valign="top"&gt;
QTY:&lt;input class="qty addLine" type="text" size="6"&gt;&lt;/td&gt;
    &lt;td width="75" valign="top"&gt;
L/Total:&lt;input class="lineTotal" type="text" size="6"&gt;&lt;br&gt;&lt;/td&gt;
    &lt;td width="100" valign="top"&gt;
&lt;div id="delButton"&gt;DEL&lt;/div&gt;
    &lt;/td&gt;
   &lt;/table&gt;
&lt;/div&gt;
&lt;div id="orderFormDiv_BottomRight"&gt;&lt;br&gt;
    &lt;table width="100%" border="1"&gt;
      &lt;tr&gt;
        &lt;td&gt;#extraDiscount&lt;/td&gt;
        &lt;td&gt;&lt;input id="extraDiscount" type="text" size="10"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;#totalDiscounts&lt;/td&gt;
        &lt;td&gt;&lt;input id="totalDiscounts" type="text" size="10" disabled&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;#productTotals&lt;/td&gt;
        &lt;td&gt;&lt;input id="productTotals" type="text" size="10" disabled&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;&lt;/div&gt;
&lt;br&gt;

&lt;p class="clear"/&gt;
&lt;/div&gt;
&lt;div id="removeAll"&gt;Delete All&lt;/div&gt;&lt;br&gt;&lt;br&gt;
&lt;div id="addLine"&gt;Add Line&lt;/div&gt;
&lt;hr&gt;
&lt;br&gt;&lt;/div&gt;
&lt;/form&gt;&lt;hr&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Any help would be AWESOME!!! Thanks!</p>
