javascript - 从多行javascript和jquery中删除一行

Question

我的结构是这样的

Itemid
itemname
itemdescription
itemprice
itemquantity
totalamount.

在这个结构中，我有计算总数(价格*数量)的函数。我有一个添加行函数，可以添加一行和一个 Grantotal 函数(添加所有总计)。我需要的只是删除功能，我已经尝试删除很多东西中的行，但它不起作用。

这是我的代码:

       $(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><td><button class="del">Delete</button></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());
    });

       ('#TextBoxesGroup').on('click','.del', function(){
    if(counter==2){
          alert("No More Rows to Remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });


 // $('#TextBoxesGroup').on('click','.del', function(){
  // $(this).parents('tr:eq(0)').remove();
 // });

我也试过这段代码:

$('#TextBoxesGroup').on('click','.del', function(){
      $(this).parents('tr:eq(0)').remove();
});

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>
        <td><button class="del">Delete</button></td>
    </tr>
</table>
<table>
    <tr>
        <td>Running Total</td>
        <td>
            <input name="running_total" id="running_total" />
        </td>
    </tr>
</table>

请让我知道我犯了什么错误，并帮助我解决这个问题。

Answer 1

简化了 fiddle 链接。很少有像 ('#TextBoxesGroup) 这样的错误，这里没有 $ 符号。大括号没有很好地平衡。

您的代码将过时而不是 count 变量，因此请使用 $('#TextBoxesGroup tr').length。

1)

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

2) Runningtotal 值刷新代码段。

 var tot1 = 0;

    $('#TextBoxesGroup tr td input.total').each(function () {           
        tot1 += parseFloat($(this).val());
    });

    $('#running_total').val(tot1);   

Working Fiddle Demo