Removing an onclick event from a div with javascript

Basically what the title says this is the code that I've tried but it doesn't work:

<div id="box" onclick="doSmt(var1, bar2)">

if (condition){
box.removeEventListener("click" , doSmt)}

I think it's better if you remove the onclick event instead of that attempt

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

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

//onclick function
function doSmt(){
   console.log("something");
}

//remove onclick event, this will be inside your if condition
document.getElementById('box').removeAttribute("onclick");

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

<div id="box" onclick="doSmt()"> div</div>

<!-- end snippet -->

What what I read at MDN for removeEventListener you can't remove an event listener that is part of the HTML attribute. So there's two options:

Add the event listener on page load

onClickHandler = () => doSmt(var1, var2);
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('box').addEventListener('click', onClickHandler);
});

// and later
if (condition) {
document.getElementById('box').removeEventListener('click', onClickHandler)

Or if you can't modify the HTML you could modify doSMT to watch for a disabled bit.

let disableBox = false;

function doSmt() {
  if (disableBox) return;
  // ...
}

if (condition) {
  disableBox = true;
}

Or

it can be removed by first accessing the element and then setting the attribute to null

<div id="myDiv" onclick="handleClick()">Click me</div>

<script>
  function handleClick() {
    alert("Div was clicked!");
  }

  // Remove the onclick event from the div
  const div = document.getElementById("myDiv");
  div.onclick = null;
</script>