DataTables Responsive: Remove row when columns are hidden
<p>I am using <a href="https://datatables.net/" rel="nofollow">DataTables</a> to create grid. </p>

<p>It's a great tool, but I have a problem with which occurs when the grid columns are hidden for example on mobile or other small devices where there is not enough room to display all columns. </p>

<p><strong>Problem:</strong></p>

<p>Removing grid row when columns are hidden. When are columns are showing it works just fine. </p>

<p><strong>Table code:</strong></p>

<pre><code>&lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Position&lt;/th&gt;
      &lt;th&gt;Office&lt;/th&gt;
      &lt;th&gt;Age&lt;/th&gt;
      &lt;th&gt;Start date&lt;/th&gt;
      &lt;th&gt;Remove&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;

  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Position&lt;/th&gt;
      &lt;th&gt;Office&lt;/th&gt;
      &lt;th&gt;Age&lt;/th&gt;
      &lt;th&gt;Start date&lt;/th&gt;
      &lt;th&gt;Remove&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;

  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Tiger Nixon&lt;/td&gt;
      &lt;td&gt;System Architect&lt;/td&gt;
      &lt;td&gt;Edinburgh&lt;/td&gt;
      &lt;td&gt;61&lt;/td&gt;
      &lt;td&gt;2011/04/25&lt;/td&gt;
      &lt;td&gt;
        &lt;button type="button" class="btn btn-info btn-sm removeRow"&gt;Remove this row&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Jena Gaines&lt;/td&gt;
      &lt;td&gt;Office Manager&lt;/td&gt;
      &lt;td&gt;London&lt;/td&gt;
      &lt;td&gt;30&lt;/td&gt;
      &lt;td&gt;2008/12/19&lt;/td&gt;
      &lt;td&gt;
        &lt;button type="button" class="btn btn-info btn-sm removeRow"&gt;Remove this row&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;

  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p><strong>Javascript code:</strong></p>

<pre><code>$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});
</code></pre>

<p>I am attaching link to <a href="https://jsfiddle.net/kid_plama/a4w0gv2q/" rel="nofollow">jsfiddle</a>. You can clearly see it works when columns are shown, and it breaks when columns are hidden.</p>

<p>I wonder if anyone else came across similar issue, any help would be appreciated.</p>