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?

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').closest('tr').remove();