Test Table - Forked

Select and remove contacts

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<label class="myLabel">Select contacts to remove</label>
<div class="container">
  <div class="rg-formHeader">
    Contact List
  </div>

  <table id="myTable" class="stripe hover">
    <thead><tr>
      <th class="head-label">Last Name</th>
      <th class="head-label">First Name</th>
      <th class="head-label">Email Address</th>
      <th class="head-label">ID</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Bridges</td>
        <td>Jeff</td>
        <td>[email protected]</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Buscemi</td>
        <td>Steve</td>
        <td>[email protected]</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Moore</td>
        <td>Julianne</td>
        <td>[email protected]</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Turturro</td>
        <td>John</td>
        <td>[email protected]</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Goodman</td>
        <td>John</td>
        <td>[email protected]</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Gilmore</td>
        <td>Jimmie</td>
        <td>[email protected]</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Elliott</td>
        <td>Sam</td>
        <td>[email protected]</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>
</div>

<button class="submitBtn" >
  Remove contact(s)
</button>

CSS

.myTable{
  border: 1px solid black;
}

JavaScript

var recipIds = [];

$(document).ready(function() {
  var table = $("#myTable").DataTable({
    dom: "lfrtpB",
    scrollY: "200px",
    scrollCollapse: true,
    paging: false,
    searching: false,
    select: {
      style: "multi",
      item: "rows"
    },
    columnDefs: [{
      targets: [3],
      visible: false,
      searchable: false
    }],
		buttons: [{
			extend: "selected", 
			className: "removeBtn",
			text: "Remove contact(s)",
			action: function ( e, dt, node, config ) {
				var selectedRows = dt.rows(".selected");
				alert(selectedRows.data().length + " rows selected");
				
				selectedRows.remove().draw();
			}
		}]
  });

  generateEventListeners(table);
});

function generateEventListeners(table) {
  $(".submitBtn").on("click", function() {
    var selectedIds = [];
		$.each(table.rows(".selected").data(), function(key, data) {
			selectedIds.push(data[3]);
		});

    alert("Selected Ids: " + selectedIds.join());
    table.rows(".selected").remove().draw();
  });
}