jQuery最近的（）remove（） <a>不能正常工作嗎？</a>

Question

請查看包含以下代碼的頁面 ：

<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文檔和此答案 ，並且代碼對我來說似乎絕對正確，但是根本行不通。 任何想法？

Answer 1

href中的this並不指向錨元素，因此不起作用。 它是指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並使用click事件刪除您的項目，現在您不會觸發任何click事件：

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