CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3219325
user3219325

Reputation: 13

Delete row from multiple rows - Javascript

I have a code that allows to find out the total (Price* quantity) for each row and it has add row functionality also. Here is the JS

    $(document).ready(function(){ 


    var counter = 2;

    $("#addButton").click(function () {
         if(counter>100){
                alert("Only 100 textboxes allowed");
                return false;
        }   

        var newTextBoxDiv = $(document.createElement('tr'))
             .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total'+ counter + '" id="total'+ counter +'" class="total" /></td>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
     });

    $(document).on('keyup', '.itmqty', function(ev){       
         // grab ID to get row number
        thisID = $(this).attr("id");
        rowNum = thisID.slice(-1); 

        //get Amount entered
        amt = $('#itemamnt'+rowNum).val();
        //get QTY
        qty = $('#itemqty'+rowNum).val();        
       $('#total'+rowNum).val(amt*qty);

      currentCount = counter-1;
      var tot = 0;
        $('.total').each(function() {
            tot += parseFloat($(this).val());            
        });

       $('#running_total').val(tot);    
    });

    //$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});

HTML

    <input type="button" id="addButton" value=" Add Row " />

<table  id="TextBoxesGroup">
   <tr>
       <td><input id="itemcode1" placeholder="Item Code 1" class="itmcode" /></td>
        <td><input id="itemname1" placeholder="Item Name 1" /></td>
        <td><input id="itemdesc1" placeholder="Item Description 1" /></td>
        <td><input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" /></td>
        <td><input id="itemqty1" placeholder="Item Qty 1" class="itmqty" /></td>
        <td><input id="total1" placeholder="Item Total 1" class="total" /></td>
    </tr> 
</table>

<table>
     <tr>
        <td> Running Total </td>
         <td> <input name="running_total" id="running_total" /></td>
    </tr>

Now when I am trying to add the delete row function, add row function is not working.Here is the code I used for deleting row

$('.del').live('click',function(){
    $(this).parent().parent().remove();
});
$('.add').live('click',function(){
    $(this).val('Delete');
    $(this).attr('class','del');
});

Please help me in reaching this out !

Upvotes: 1

Views: 426

Answers (1)

Mark
Mark

Reputation: 2221

The issue is that you are binding on existing elements only.

In jQuery try this instead. It will bind to the table, and then watch for any click event on an item with the del class.

$('#TextBoxesGroup').on('click','.del', function(){
    $(this).parent().parent().remove();
});

You might also want to change your remove code to the following:

$(this).closest('tr').remove();

This will search for the first parent TR and delete it. This will prevent problems later on if you want to put other levels of children in your rows.

You can see a working example in my JSFiddle:

http://jsfiddle.net/JhrvN/1/

Upvotes: 1

Related Questions