从多行中删除行-Javascript

我有一个代码，可以找出每行的总数（价格*数量），它还具有添加行功能。 这是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());
});

---

请帮我把这个拿出来

问题是您只绑定现有元素

在jQuery中，试试这个。它将绑定到表，然后使用

del

类监视项目上的任何

click

事件

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

您可能还希望将删除代码更改为以下内容：

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

这将搜索第一个父TR并将其删除。如果要在行中放置其他级别的子级，这将防止以后出现问题

您可以在my JSFIDLE中看到一个工作示例：

---

我在提供的HTML中没有看到任何.del或.add按钮，请您将您的内容放在Hi Mark上，您的代码在fiddle中运行得非常好。但是当我在chrome/firefox中尝试时，删除功能不起作用！

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

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