Row().remove() Not working for me.

Hi there, this is my first time trying to use DataTables, I'm trying to use the Row().remove() but I am not even able to trigger it via the button and I don't know what I am doing wrong.

I tried hooking it to the button using id's or classes but I am still unable to do so.

=== JS ===
let table = $('#existingVariableTable').DataTable();

$('#existingVariableTable tbody').on('click', 'img.icon-delete', function () {
    alert("click");
});

===HTML===

                   <table id="existingVariableTable" class="display">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Lorem ipsum</td>
                                <td>7788776</td>
                                <td>
                                    <button type="button">
                                        <img class="icon-delete" src="./assets/deleteIcon.png">
                                    </button>
                                </td>
                            </tr>
                         </tbody>
                     </table>