Question

我有以下代码，其中的链接应删除它所属的区域：

<a href="javascript:function() { $(this).closest(".DatesSelection").remove(); };">
  <div class="CloseButton">
    Close
  </div>
</a>

按钮生成但是当我点击它时，我有错误：

Uncaught SyntaxError：意外的令牌（

有人可以帮忙吗？欢呼声，

Answer 1

问题是由href属性中的函数定义和引号的使用引起的。要解决此问题，请删除逻辑周围的function()，使用onclick作为内联处理程序，并使用单独的引号来分隔atttribute值和选择器字符串：

<a href="#" onclick="$(this).closest('.DatesSelection').remove();">

然而，一个更好的方法完全是使用不显眼的事件处理程序，而不是将内联JS代码填充到href（它永远不应该）或on*事件属性（现在大量过时），如下所示：

＆＃13;

$(function() {
  $('.DatesSelection a').click(function(e) {
    e.preventDefault();
    $(this).closest(".DatesSelection").remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DatesSelection">
  <a href="#">
    <div class="CloseButton">
      Close
    </div>
  </a>
</div>
<div class="DatesSelection">
  <a href="#">
    <div class="CloseButton">
      Close
    </div>
  </a>
</div>
<div class="DatesSelection">
  <a href="#">
    <div class="CloseButton">
      Close
    </div>
  </a>
</div>

＆＃13;

Answer 2

另一种选择是使用事件委托，在某个父容器上设置click事件监听器，并检查事件的来源是否是相应的锚。

event.target.tagName === 'A'检查事件是否由a元素
event.target.parentNode.className === 'DatesSelection'检查触发事件的元素的父级是否具有类DatesSelection
如果满足两个条件，则删除已触发事件的那个元素的父元素

＆＃13;

document.body.addEventListener('click', event => {
  if (event.target.tagName === 'A' && event.target.parentNode.className === 'DatesSelection') {
    event.preventDefault();
    event.target.parentNode.remove();
  }
});

＆＃13;

<div class="DatesSelection">
  <a href="#"> Close </a>
</div>

<div class="DatesSelection">
  <a href="#"> Close </a>
</div>

＆＃13;

如何删除当前区域点击？

2 个答案: