Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-git.js"></script>
  <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css"  href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /> 
​
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table id="myTable"  class="display">    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
          <th>remove</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
          <td><a href="#" class="remove">remove </a></td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
          <td><a href="#" class="remove">remove </a></td>
        </tr>
    </tbody></table>
  <br />
​
</body>
</html>
 
​
 
    $(document).ready(function() {
      
        var tbl = $('#myTable').DataTable({
            "bLengthChange": false,
            "bFilter": false,
            "iDisplayLength": 5,
            "responsive": true,
            "retrieve": true,
            "columns": [{
            "width": "50%"
            }, {
                "width": "10%"
            }, {
                "width": "10%"
            }],
        });
​
      $('#myTable tbody').on( 'click', '.remove', function () {
        alert('clicked');
        console.log(tbl);
        tbl.row( $(this).parents('tr') ).remove().draw();
      } );
​
    });
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers