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> 
            <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.