Datatable – Javascript – delete all rows is not working

I have a datatable inside a bootstrap modal. I am able to add/update/delete individual rows. But I am not able to clear all the rows. It does nothing.

HTML code:

<table class="table table-bordred" 
   id="tbl_outputdetail" name="tbl_outputdetail">
  <thead>
    <tr>
      <th>By Product</th>
      <th>Quantity Produced</th>
      <th></th>
      <th class="hide_column"></th>
    </tr>
    <tr>
      <th>
        <select style="width:300px;" class="form-control m-input"
           id="outputitem" name="outputitem">
        </select>
      </th>
      <th>
        <input type="text" class="form-control m-input" 
           id="outputqty" name="outputqty">
      </th>
      <th>
        <a href="#" id="output-add" name="output-add">
          <i class="la la-check"></i>
        </a>
        &nbsp;
        <a href="#" id="output-clear" name="output-clear">
          <i class="la la-close"></i>
        </a>
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

DataTable Definition:

tablew4 = $("#tbl_outputdetail").DataTable({
searching: false,
paging: false,            
serverSide:false,
ordering:false,
scrollX: true,
info:false,
columnDefs:[
{targets: [ 0 ], width: '400px'}, {targets: [ 1 ], width: '400px'},
{targets: [ 2 ], width: '100px'}, {targets: [ 3 ],   className: "hide_column"} 
],
"order": []
});

Code to delete the rows:

tablew4.clear().draw();
tablew4.rows().remove().draw();

Both methods do not clear the rows.