Excuse me, now I am using this Bootstrap table. I don't know how to remove a row in the table, I have seen one similar example in the documentation, but I don't really understand what it means. Especially I don't know what {field: 'id', values: ids} means. The user experience I want to achieve is click button in any row that I want to remove, then that row will be removed.

Excuse me, now I am using this Bootstrap table. I don't know how to remove a row in the table, I have seen one similar example in the documentation, but I don't really understand what it means. Especially I don't know what {field: 'id', values: ids} means. The user experience I want to achieve is click button in any row that I want to remove, then that row will be removed.

• javascript
• html
• css
• twitter-bootstrap

• Here is a examples of Bootstrap table usage: bootstrap-table.wenzhixin.cn/getting-started/#usage – Banzay Commented Nov 2, 2016 at 9:56

2 Answers 2

Get defined bootstrap table as variable.

let table = $('#table');

Detect click event with remove button

$(document).on('click', '.removeRowButton', function() {

In bootstrap-table elements in rows have data-index.

Next row getting clicked row index

    let rowid = $(this).closest('tr').data('index');

Built in function for removing rows

    table.bootstrapTable('remove', {
      field: '$index',
      values: [rowid]
    });


let table = $('#table');
$(document).on('click', '.removeRowButton', function() {
    let rowid = $(this).closest('tr').data('index');
    table.bootstrapTable('remove', {
      field: '$index',
      values: [rowid]
    });
});

 $(document).on('click', 'button.removebutton', function () { // <-- changes
     $(this).closest('tr').remove();
     return false;
 });