jQuery nearest（）remove {）在<a> doesn&#39;t work?

Question

Please see this page上有以下代码：

<div class="pure-control-group query-brand-by-column">
    <!-- somethings else -->
    <div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
        <a href="javascript:$(this).closest('.query-brand-by-column').remove();" class="pure-button danger">X</a>
    </div>
</div>

单击X链接应该删除其祖先div.query-brand-by-column作为一个整体但不知何故它无法正常工作。我已经检查了jQuery文档和this answer，代码似乎对我来说绝对没问题，但它根本不起作用。有什么想法吗？

Answer 1

this中的

href未引用锚元素，因此无效。它指的是window。

您应该使用jQuery绑定元素事件处理程序。

脚本

$(document).on('click', '.pure-button danger' function(e) {
    e.preventDefault();
    $(this).closest('.query-brand-by-column').remove();
});

HTML 的

<div class="pure-control-group query-brand-by-column">
    <!-- somethings else -->
    <div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
        <a href="#" class="pure-button danger">X</a>
    </div>
</div>

我不推荐，但您可以使用内联onclick处理程序。

<a onclick="$(this).closest('.query-brand-by-column').remove();" href='#' class="pure-button danger">X</a>

Answer 2

从你的html中删除你的javascript，并通过点击事件删除你的项目，现在你没有触发任何点击事件：

<script>
$(function(){
 $('.pure-form').on('click','.query-brand-by-column a',function(){//this will create and delegate your click event to work on dynamically created items 
  $(this).closest('.query-brand-by-column').remove();
 });
});
</script>

Answer 3

这是你的答案，享受

  <a href="javascript:void(0);" onclick="return $(this).closest('.query-brand-by-column').remove();" class="pure-button danger">X</a>