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中删除该节点。

您要尝试的方法：

.closest()：查找父DOM层次结构中的第一个匹配项   https://api.jquery.com/closest

.filter()：根据某些条件过滤数组   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

因此，基本上，您可以使用tr找到最近的closest节点，然后从该tr的第一个td元素中找到客户名称。然后，使用filter来从order数组中删除其实例。以下是摘录中更改后的代码：

 $('.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>

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

2 个答案: