cancel/disable window.location in JavaScript

I link every row in my table with js

<tr class="clickable-row" data-row-id="{{$Offer->offer_nr}}" data-href='link'>

$(".clickable-row").click(function() {
  window.location = $(this).data("href");
});

In my last cell, in every row, I have a button to open a modal. How can I cancel the window.location in JavaScript when I click the button to open my modal?

I made the last cell in my row unclickable with CSS:
pointer-events: none;
but the button is then also unclickable

I tried also to stop the window.location when I click on the button with

 $(document).on('click', '.delete-record', function (e) {
    e.preventDefault();
 }

You don't want to prevent the default action (which is nothing for a click on a table cell), you want to stop the event propagation (jQuery):

$('.delete-record', function (e) {
    e.stopPropagation();
});

This will cause your handler on .clickable-row to simply not trigger.

You can detect if the button was clicked using the target of what was clicked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".clickable-row").click(function(e) {
  const deleteClicked = e.target.closest('.delete-record');
  if (deleteClicked) {
    // call delete modal if you want
    return false;
  } 
  // window.location = $(this).data("href");
  console.log($(this).data("href"));
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="clickable-row" data-href="a">
      <td>a</td>
      <td><button class="delete-record">X</button>
    </tr>
    <tr class="clickable-row" data-href="b">
      <td>b</td>
      <td><button class="delete-record">X</button>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

or you can stop the event from going down the tree, but you can not use event delegation on the document because the event has already been fired on the row by the time it gets to the document. So you would need to bind to the buttons directly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(".clickable-row").click(function(e) {
  // window.location = $(this).data("href");
  console.log("clicked row:", $(this).data("href"));
});

$(".delete-record").click(function(e) {
  e.stopPropagation();
  console.log("clicked button");
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="clickable-row" data-href="a">
      <td>a</td>
      <td><button class="delete-record">X</button>
    </tr>
    <tr class="clickable-row" data-href="b">
      <td>b</td>
      <td><button class="delete-record">X</button>
    </tr>
  </tbody>
</table>

<!-- end snippet -->

Here's a possible solution.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('table').on('click', 'tr', function(e){
	if (e.target.tagName == "BUTTON"){
  	console.log("clicked button");
  }else{
  	//window.location = "whatever";
  	console.log("clicked row");
  }
	

});

$('table button').on('click', e => {
	console.log('button');

});

<!-- language: lang-css -->

td{padding:10px}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr><td>A1</td><td>B1</td><td><button class="delete-record">click1</button></td></tr>
<tr><td>A2</td><td>B2</td><td><button>click2</button></td></tr>
<tr><td>A3</td><td>B3</td><td><button>click3</button></td></tr>
<tr><td>A4</td><td>B4</td><td><button>click4</button></td></tr>

</table>

<!-- end snippet -->