JQuery with .live & .remove I can't figure this out

Question

Here is a jsfiddle that is working except for the function I'm trying to figure out.

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

The first is that only ONE extra line may be available at any time.

The second would be to remove that one extra line when the #extraDiscount has .focusin.

Here's the JQuery.

    var TheOrderLine = ('Name: WholeSale: QTY: L/Total:
DEL');

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

Here's HTML form....

    








   
    
Name:
    
WholeSale:
    
QTY:
    
L/Total:

    
DEL
    
   



    
      
        #extraDiscount
        
      
      
        #totalDiscounts
        
      
      
       #productTotals
        
      
    





Delete All



Add Line

Any help would be AWESOME!!! Thanks!

Tim Joyce · Accepted Answer

to limit appending only 1 line for .orderLine change your click function to

$('#addLine').bind('click', function(){
    if($('.orderLine').length == 0)
        $('#orderFormDiv_Lines').append(TheOrderLine); 
});

and to remove the line when discount is focused :

$('#extraDiscount').bind('focus', function(){
    $('#orderFormDiv_Lines table').each(function(){
        var hasInput = false;
        $(this).find('input').each(function(){
            if($(this).val() != '')
                hasInput = true;
        });
        if(!hasInput) $(this).remove();
    }); 
});

JQuery with .live & .remove I can't figure this out

Here's the JQuery.

Here's HTML form....

Answers (1)

Related Questions

JQuery with .live &amp; .remove I can&#39;t figure this out

Here's the JQuery.

Here's HTML form....

Answers (1)

Related Questions

JQuery with .live & .remove I can't figure this out