javascript - jQueryclosest()remove()在上不起作用？

Question

请参阅此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

href 中的

this 并不引用 anchor 元素，因此它不起作用。它指的是窗口。

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

脚本

$(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>