单击后如何删除特定行 | Javascript

Question

我有一个 table 自动生成的订单，如下所示：

function orderHandlers() {
    $.ajax({
        url: "/order",
        type: "GET",
        contentType: "application/json",
        success: function(data) {
            const states = {
                "new": "Не оплачен",
                "paid": "Оплачен",
                "assembly": "В сборке",
                "delivery": "В доставке",
                "delivered": "Доставлен",
                "disputed": "Оспаривается"
            }


            for (let item of data) {
                if (item.timestamp) item.datetime = new Date(item.timestamp).toLocaleString('ru-RU');
                item.state = states[item.order] || "Неизвестен";
                item.amount = item.amount + ' ₽';
                item.actions = '';
                
                if (item.state === 'Не оплачен') {
                        item.actions = `
                    <a href="./orderCancel.html"  class="item-action-btn"> Отменить заказ </a>
                    `;
                    }
                    if ((item.state === 'Оплачен') || (item.state === 'В сборке') || (item.state === 'В доставке')) {
                        item.actions = "";
                    }
                    if (item.state === 'В сборке') {
                        item.actions = `<a href="" class="item-action-btn"> Задать вопрос </a>`;
                    }
                    if (item.state === 'Доставлен') {
                        item.actions = `<a href="" class="item-action-btn"> Связаться с менеджером </a>`;
                }
            }

            $('.catalog-message').hide();

            console.log('[Orders]', data);
            renderTable('#user-orders', data, [{
                    data: '_id'
                },
                {
                    data: 'datetime'
                },
                {
                    data: 'state'
                },
                {
                    data: 'amount'
                },
                {
                    data: 'actions'
                }
            ]);

            

            $('#user-orders').show();
        },
        error: function(error) {
            renderTable('#user-order', [], []);
            console.log('[Error]', error.responseText);
            showToast(error.responseText);
        }
    });
}

如您所见，我添加了一个 link 作为取消选项，但我无法解决这个问题：我如何实际取消（将此对象从订单中弹出数组）当我点击 'Cancel order' 按钮之一时的顺序

编辑：添加了 table

的图片

Answer 1

您将需要锚点的 onclick 事件处理程序，但如果您正在寻找服务器端与客户端一致，则需要能够从该行获取标识符。

假设 html 从 renderTable() 看起来像这样，我为 ID 添加了一些唯一性并假设 table 中可能有不止一行。

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td id="_id1">id</td>
          <td id="datetime1">datetime</td>
          <td id="state1">state</td>
          <td id="amount1">amount</td>
          <td id="actions1">
            <a href="#" class="item-action-btn">action1</a>
          </td>
        </tr>
        <tr>
          <td id="_id2">id</td>
          <td id="datetime2">datetime</td>
          <td id="state2">state</td>
          <td id="amount2">amount</td>
          <td id="actions2">
            <a href="#" class="item-action-btn">action2</a>
          </td>
        </tr>
        <tr>
          <td id="_id3">id</td>
          <td id="datetime3">datetime</td>
          <td id="state3">state</td>
          <td id="amount3">amount</td>
          <td id="actions3">
            <a href="#" class="item-action-btn">action3</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

下面查找任何 .item-action-btn 点击，将其 ID 记录到控制台（您可以用它做其他事情），然后从 table.

中删除该行

$(document).on('click', '.item-action-btn', function(e) {
  e.preventDefault();
  let tr = $(this).closest('tr');
  console.log(tr.children('td:first').attr('id'));
  // maybe send this ID to the server using ajax to update cart?
  // if you wanted the text out of that initial column use this:
  console.log(tr.children('td:first').text());
  tr.remove();
});

https://jsfiddle.net/mk9xep5r/

单击后如何删除特定行 | Javascript

How to delete a specific row after a click | Javascript

javascript

arrays