为什么删除 class 在 javascript 中不起作用？

Question

I have tried this before and it worked well but here i dont know...

<div onclick="choose(this)">
     <div class="choose">
          <button><a>click</a></button>
     </div>
</div>

my JavaScript:

function choose(obj) {
  obj = obj || document.activeElement;
  var res_item = obj.querySelector(".choose");
  res_item.classList.add("choosed_item");
  var close = obj.querySelector(".choose button a");
  close.addEventListener("click", function closemodal() {
    if (res_item.classList.contains("choosed_item")) {
      res_item.classList.remove("choosed_item");
    }
  });
}

choose and choosed_item have custom style

This is strange, but if i change remove to add and choose another class it works well !

Answer 1

The event is not updated because its child of onclick function. Thats why I integrated an interval. That will help to update the eventlistener:

function choose(obj) {
    obj = obj || document.activeElement;
    var interval;
    var res_item = obj.querySelector(".choose");
    res_item.classList.add("choosed_item");
    var close = obj.querySelector(".choose button a");
    close.addEventListener("click", function closemodal() {
      if (res_item.classList.contains("choosed_item")) {
        interval = setInterval(function () {
          res_item.classList.remove("choosed_item");
          stopInterval();
        }, 0);
        function stopInterval() {
          clearInterval(interval);
        }
      }
    });
  }

Hope I could help!