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

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();
});

Answer 2

您可以找到父 tr 元素并使用该元素查找客户名称并从 DOM 中删除该节点。

你想尝试的几种方法：

1. .closest()：在父 DOM 层次结构中找到第一个匹配项 https://api.jquery.com/closest
2. .filter()：根据某些条件过滤数组 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

所以，基本上你可以使用closest 找到最近的tr 节点，然后从tr 的第一个td 元素中找到客户名称。 然后，使用filter on 命令从order 数组中删除其实例。 以下是来自 sn-p 的更改代码：

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

    e.stopImmediatePropagation();

    // Delete order object
    var elm = $(this).closest('tr');
    var nameToDelete = elm.find('td:first').text();

    // filter out order
    order = order.filter(item => item.name !== nameToDelete);
    console.log('order now is = ', order);
    // Delete HTML element
    elm.remove();
  });

更合适的是，了解如何使用 HTML 数据-* 属性 以及 id 和 class，这可以真正简化 DOM 操作。网上有很多样片。试试看。 干杯！

var order = [];

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

$('#btnAdd').click(function() {
  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
    var elm = $(this).closest('tr');
    var nameToDelete = elm.find('td:first').text();

    // filter out order
    order = order.filter(item => item.name !== nameToDelete);
    console.log('order now is = ', order);
    // Delete HTML element
    elm.remove();
  });

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

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

<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>