CODEWITHSUNDEEP
javascriptjquerybootstrap-table
Ahmet Poyraz Akçal
Ahmet Poyraz Akçal

Reputation: 65

Delete row from table using button - Bootstrap Table

I'm trying the row to be deleted when I click the delete icon in the table using bootstrap table.

My table:

<table id="checkDataTable">
    <thead style="color: #31708f; background-color: #d9edf7 ">
        <tr>
            <th data-field="AssetReference">Referans</th>
            <th data-field="Customer">Müsteri</th>
            <th data-field="ReceiverCompanyName">Alici Firma</th>
            <th data-field="Tools" data-formatter="StatuFormatter">Islem</th>
        </tr>
    </thead>
</table>

Javascript:

function StatuFormatter(value, row, index) {

    return "<a onclick='removeAssetEconomyCheckBillOfLadingRow()'><i class='fa fa-trash fa-2x' aria-hidden='true'></i></a>";
}

function removeAssetEconomyCheckBillOfLadingRow(id) {
    alert(id);
}

It's fine until the removeAssetEconomyCheckBillOfLadingRow function.

How can I delete inside this function?

Upvotes: 0

Views: 2424

Answers (2)

Nileksh Dhimer
Nileksh Dhimer

Reputation: 119

Please try below:

$(document).on('click', 'button.deleteRow', function(event) {
  $(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkDataTable" class="table">
  <thead style="color: #31708f; background-color: #d9edf7 ">
    <tr>
      <th data-field="AssetReference">Referans</th>
      <th data-field="Customer">Müşteri</th>
      <th data-field="ReceiverCompanyName">Alıcı Firma</th>
      <th data-field="Tools" data-formatter="StatuFormatter">İşlem</th>
    </tr>
  </thead>
  <tobdy>
    <tr>
      <td>Data1</td>
      <td>Data1</td>
      <td>Data1</td>
      <td><button type="button" class="deleteRow">
                    Delete
                    </button></td>
    </tr>
    <tr>
      <td>Data2</td>
      <td>Data2</td>
      <td>Data2</td>
      <td><button type="button" class="deleteRow">
                    Delete
                    </button></td>
    </tr>
    <tr>
      <td>Data3</td>
      <td>Data3</td>
      <td>Data3</td>
      <td><button type="button" class="deleteRow">
                    Delete
                    </button></td>
    </tr>
  </tobdy>
</table>

Upvotes: 1

KpStar
KpStar

Reputation: 132

  1. First of all, you need to set id to to identify the deleting row.
<tr id="1"></tr>
  1. And get tr and remove
function removeAssetEconomyCheckBillOfLadingRow(id) {
    $('#checkDataTable').row($('#{{id}}'))).remove().draw();
}

Upvotes: 1

Related Questions