datatables - Hide all the child element which are shown in table using jQuery

Question

When I apply search on the table, I'm trying to hide all the shown children of the table row. But I'm unable to do so. Here is my code. Don't know what's wrong.

var table = $("#tblTemplateList").DataTable();
$("#tblTemplateList tr").each(function(index,tr){
  if($(tr).child.isShown()){
    $(tr).child.hide();
  }
});

Answer 1

this small example

function hiderows() {
  $("#tblTemplateList tr").each(function(index, tr) {
    if ($(tr).is(":visible")) {
      $(tr).hide();
    } else {
      $(tr).show();
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTemplateList">
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
</table>

<button type="button" onclick="hiderows()">
Hide/Show Rows
</button>