jQuery closest（）remove（）on <a>はうまくいきませんか？

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

thishrefはアンカー要素を意味しないため、動作しません。それは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> 

をお楽しみください。