javascript - 如何找到动态生成的当前元素索引？

Question

我已经编写了一些简单的函数，可以让我添加订单。我还动态创建了一个按钮，调用该按钮时将删除作为表格行的当前 html 元素。现在，我一直在寻找我需要的当前元素索引，以便我可以使用 splice 将其从数组中删除。

const order = [];

const customer = {
  name: '',
  totalCups: 0
}

$('#btnAdd').click(function() {
  debugger

  var itemName = $('#customerName');
  var itemTotalCups = $('#customerTotalCups');

  customer.name = itemName.val();
  customer.totalCups = itemTotalCups.val();

  // Data structure Queue
  order.push(Object.assign({}, customer));

  // UI - HTML rendering - start
  if (order.length === 1) {
    // Create table column name
    $('#AllOrders').append('<table id="tbl" class="table table-bordered"><tr><td>Customer</td><td>Cups</td><td></td></tr></table>');

  }

  var itemElement = `<tr><td>${itemName.val()}</td><td>${itemTotalCups.val()}</td><td><a class='del' href='#'>Cancel order</a></td></tr>`;

  $('#tbl').append(itemElement);
  // UI - HTML rendering - end

  $('.del').click(function(e) {

    e.stopImmediatePropagation();

    // Delete order object
    debugger
    //var elm = $(this).parent().text().substr(0, $(this).parent().text().length-1);
    console.log(elm);
    console.log(order.indexOf(elm));

    //order.splice(order.indexOf(elm),1);
    //order.splice(2,1);

    // Delete HTML element
    $(this).parent().parent().remove();
  })

  // Reset textbox
  itemName.val("");
  itemTotalCups.val("");

  // Optional Design
  $('#ViewAllOrders').click();
  debugger;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="customerName" type="text" />
<input id="customerTotalCups" type="number" />
<button id="btnAdd">Add</button>
<div id="AllOrders"></div>

我搜索解决方案但无法找出下面的注释代码来找到元素

 //var elm = $(this).parent().text().substr(0, $(this).parent().text().length-1);

我被困在 $('.del').click 事件处理程序中。

Answer 1

您可以通过获取单击的取消按钮所在行的索引来找到 order 数组中的元素。

为此，您必须首先获取当前行。您可以使用 closest方法:

var $row = $(this).closest('tr');

现在可以通过index获取当前行的索引方法。您必须考虑到标题有 tr，我们需要减去一个:

var index = $row.index() - 1;

您的最终代码应如下所示:

$('.del').click(function(e) {
    e.stopImmediatePropagation();
    var $row = $(this).closest('tr');
    var index = $row.index() - 1;
    order.splice(index, 1);

    // Delete HTML element
    $row.remove();
});