Question

我有这个jQuery，它附加一行链接以删除行。我有这个代码，但它不会删除该行。

除了函数remove()

之外，一切正常

也没有错误。

var currentTotal = 0;

function remove(id) {
  $(this).closest('tr').remove();

}

$(document).ready(function() {

      var arr = [];

      $("#btnAdd").click(function() {

        var medname = $("#MedicineID option:selected").text();
        var id = $("#MedicineID option:selected").val();
        var qty = $("#myID").val();

        $.ajax({

          url: '/Purchases/GetValue',
          type: 'GET',
          datatype: 'json',
          data: {
            'id': id
          },
          success: function(val) {

            if (qty == 0) {
              alert("Please define the quantity");
            } else {
              var item = $('#MedicineID').val();

              if ($.inArray(item, arr) != -1) {
                alert("Specified medicine is already been added")
              } else {
                arr.push(item);
                if (currentTotal == 0) {
                  currentTotal = val * qty;
                  $("#tblList").append('<tr> <td>' + medname + '</td>  <td>' + qty + '</td><td> ' + val + '  </td>  <td><a onclick="remove(' + id + ')" class="remove" href="#">Remove</a></td></tr>');
                  $('#total').text(currentTotal);
                } else {
                  var price = val * qty;
                  currenTotal = currentTotal += price;
                  $("#tblList").append('<tr> <td>' + medname + '</td>  <td>' + qty + '</td><td> ' + price + '  </td>  <td><a onclick="remove(' + id + ')" class="remove" href="#">Remove</a></td></tr>');
                  $('#total').text(currentTotal);
                }
              }
            }
          }
        })
      });

以下是我视图中的表格

 <table id="tblList" class="table">
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
            </th>
        </tr>
    </table>
    <br />
    <table class="table">
        <tr>
            <th>Total</th>
            <th></th>
            <th><p id="total">0</p></th>
            <th></th>
        </tr>
    </table>

Answer 1

您只是使用id调用该函数并尝试删除该ID。但是你需要做的是在调用函数时传递元素。

function remove(id,element) {
      $(element).closest('tr').remove();
    }//try something like this

在onclick功能中你必须编辑这样的代码

onclick="remove(' + id + ',this)"

最后，您的代码应该如下click here

Answer 2

我认为你需要尝试这种希望。

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

Answer 3

修改删除功能以捕获事件

   function remove(id,event) {
      $(event.target).closest('tr').remove();
    }

致电时请使用以下代码

$("#tblList").append('<tr> <td>' + medname + '</td>  <td>' + qty + '</td><td> ' + price + '  </td>  <td><a onclick="remove(' + id + ',event)" class="remove" href="#">Remove</a></td></tr>');

Jquery没有删除行

3 个答案: