两个点击函数作用于同一div：第一个生效第二个失效的JavaScript问题

你的问题出在事件冒泡上：关闭按钮是包裹在触发弹窗的<li id="open-from-to-date">内部的，点击关闭按钮时，事件会向上冒泡到父元素li，触发li的点击事件——也就是刚给弹窗加上dis-none，又被立刻移除了，所以弹窗关不掉。

给你两种解决思路：

方法一：阻止关闭按钮的事件冒泡 #

修改JS代码，在关闭按钮的点击回调里添加event.stopPropagation()，阻止事件向上传递：

var fromToDate = document.getElementById('from-to-date');
var openFromToDate = document.getElementById('open-from-to-date');
var closeFromToDate = document.getElementById('close-from-to-date');

openFromToDate.addEventListener('click', function() {
  fromToDate.classList.remove('dis-none');
});

closeFromToDate.addEventListener('click', function(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  fromToDate.classList.add('dis-none');
});

方法二：调整DOM结构，把弹窗移出触发按钮的父元素 #

把弹窗<div id="from-to-date">从li里拿出来，这样点击关闭按钮就不会触发li的点击事件了：

<li id="open-from-to-date">
  <span class="custom-span-style warning-bk date-span">
    From: 2022-09-16 To: 2022-09-18
  </span>
</li>
<!-- 弹窗移到li外面 -->
<div class="from-to-date dis-none" id="from-to-date">
  <div class="from-to-date-wrapper">
    <div class="close-from-to-date" id="close-from-to-date">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
  </div>
</div>

两种方法都能解决问题，选哪种看你的布局需求。

内容的提问来源于stack exchange，提问作者yasser Eltibili