How to delete a specific row after a click | Javascript

Question

I have a table with orders that is automatically generated and looks like this:

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

As you can see I have added a link for a cancelation option but I can't get my head around this: how do I actually cancel (pop this object out of Orders array) the order when I click on one of the 'Cancel order' buttons

Edit: added a pic of the table

which do you don't understand? onclick? how to remove an item from an array? or how to rerender the table? — webdeb
– webdeb, Commented May 27, 2022 at 15:16
Just noticed you appear to be using R Shiny, is that correct? — Lucretius
– Lucretius, Commented May 27, 2022 at 15:25
@Lucretius hi there! no, I'm not using R Shiny. The table is generated automatically when I pass the payment page. Then it creates an array of objects where each one is the order. — karina ivanova
– karina ivanova, Commented May 27, 2022 at 16:27
@webdeb hi! I do not understand how to remove an order by clicking on the Cancel order link. I need to be able to click on the button in the row that I want to be removed from the array. — karina ivanova
– karina ivanova, Commented May 27, 2022 at 16:40
your orders are stored on the server side, so you want to remove it on the server side and then reload the table — webdeb
– webdeb, Commented May 28, 2022 at 11:32

Lucretius · Accepted Answer · 2022-05-27 16:51:56Z

1

You'll need an onclick event handler for the anchor, but you'll need to be able to get an identifier from that row if you're looking for the server side to agree with the client side.

Assuming the html looks something like this from renderTable(), I added some uniqueness to the IDs and assumed that there may be more than one row in the 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>

Below looks for any .item-action-btn click, logs its id to console (you could do other stuff with it), and then removes the row from the 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/

edited May 27, 2022 at 16:51

answered May 27, 2022 at 15:08

Lucretius

1,0771 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

karina ivanova Over a year ago

Thank you for your answer. I can't assign IDs to every single item of the table because they're generated automatically. I'd like to be able to click on the link and get the ID of the element from the same row where the link was to the event handler so then it does the job and removes the obj from the array

Lucretius Over a year ago

I might be able to help more if you provided some sample html of what the output of renderTable() is doing. Thanks,

Lucretius Over a year ago

@karinaivanova I also added an example of how to get the text from within the first <td> element that you labeled "ID" of the row using this: console.log(tr.children('td:first').text()); (added to answer above)

karina ivanova Over a year ago

it works but it doesnt remove it from the array

Lucretius Over a year ago

I think you might be using a plugin of some kind (not shiny apparently), please try to link a working jsfiddle.net that is doing most of what you would like. It's harder when we can't see the problem. There are lots of ways to manipulate arrays, but I can't get your code to replicate the existence of an array. love2dev.com/blog/javascript-remove-from-array

|

Collectives™ on Stack Overflow

How to delete a specific row after a click | Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related