how to select id excluding certain button or class?

Question

I have a table like this:

The first row is thead and the second row is tbody that has id="chosen".

I made a function to remove the closest tr when the X button is clicked. And then I'm making function to do something else when I click the whole row except for the button. (Now, function alerts message for the check)

But the problem is, if I click the X button, an alert message appears. So, I want to exclude the X button area when calling that second function.

I tried .not() but it didn't work. :(

Html code for that table:

                <table class="table table-bordered table-sm table-hover">
                    <thead>
                        <tr class="thead-light border">
                            <th>퀘스트 이름</th>
                            <th>난이도</th>
                            <th>목표</th>
                            <th>추천맵</th>
                            <th>반납</th>
                            <th width="50px">삭제</th>
                        </tr>
                    </thead>
                    <tbody id="chosen">

                    </tbody>
                </table>

And my script here:

<script>
$(document).ready(function($) {
    $(".clickable-row").click(function() {
        var cloned = $(this).clone();
        cloned.append('<td align="center";><button type="button" class="delete">X</button></td>');
        $(cloned).appendTo($("#chosen"));
    });

     $("#reset").on("click", function() {
        $("#chosen").empty();
    });-

     $("#chosen").on("click", ".delete", function() {
        $(this).closest("tr").remove();
    });

    $("#chosen").not(".delete").on("click", function() {
        alert("Just for check")
    });

});
</script>

That first function makes a row that includes the delete button and then attaches to "choose" tbody.

Answer 1

You can use td:not(:last-child) to exclude last td from tr where delete button is located.

Demo Code :

//not last td 
$("#chosen").on("click", "tr td:not(:last-child)", function() {
  alert("Just for check")
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-bordered table-sm table-hover">
  <thead>
    <tr class="thead-light border">
      <th>퀘스트 이름</th>
      <th>난이도</th>
      <th>목표</th>
      <th>추천맵</th>
      <th>반납</th>
      <th width="50px">삭제</th>
    </tr>
  </thead>
  <tbody id="chosen">
    <tr>
      <td>name2</td>
      <td>difficulty2</td>
      <td>goal2</td>
      <td>recommended2</td>
      <td>return2</td>
      <td><button type="button" class="delete">X</button></td>
    </tr>
    <tr>
      <td>nam2</td>
      <td>difficulty2</td>
      <td>goal2</td>
      <td>recommended2</td>
      <td>return2</td>
      <td><button type="button" class="delete">X</button></td>
    </tr>
  </tbody>
</table>