Why’s .closest() removing the entire table when I only want it to remove the specific row?

I’ve been stuck on this for hours and can’t figure out what’s wrong.

I’m trying to only remove the row (the entire <tr></tr>) that the user wants remove. The check the checkbox followed by clicking Delete.

My jquery code below removes the entire table rather than the row the user wants removed when clicking Delete.

How can I make it so that the user removes only the row they want to remove? Thanks in advance!

My jquery code is inside a giant $document.on('click')....

Here’s my table:

<tr>
    <td><input type="checkbox" class="question-manager-id" value="7052"></td>
    <td>7052</td>
    <td class="anchor-looking-no-bottom edit-question" data-url="http://localhost.test/games/7052">Some data</td>
    <td>Text</td>
    <td>Math</td>
    <td>20</td>
    <td>math vocab</td>

    <td>
       <label class="switch">
         <input type="checkbox" data-id="7052" class="question-manager-enabled-toggle" checked="">
         <span class="toggle-slider round"></span>
      </label>                        
    </td>

    <td>
      <button class="button small delete-question alert" data-id="7052">Delete</button>
    </td>
</tr>

Here’s my jquery (I’ve added questionId variable in case I could somehow use it to only remove the user’s chosen row):

let questionId = $('.question-manager-id:checked').val(); // returns 7052
$('button.delete-question').parents('tr').remove();