jQuery nächste() remove() auf <a> funktioniert nicht?

Question

Bitte lesen Sie diesen page, die diesen Code hat:

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

die X-Link klicken, sollte seine Vorfahren div.query-brand-by-column als Ganzes entfernen, aber irgendwie funktioniert es nicht. Ich habe jQuery Dokumente überprüft und this answer und der Code scheint absolut in Ordnung zu mir, aber es funktioniert einfach nicht. Irgendeine Idee?

Answer 1

this in href bezieht sich nicht auf Ankerelement, daher funktioniert es nicht. Es bezieht sich auf window.

Sie sollten Element Ereignishandler mit jQuery binden.

Script

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

Ich werde nicht zu empfehlen, jedoch können Sie Inline-onclick Handler verwenden.

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

Answer 2

Nehmen Sie Ihr Javascript aus Ihrem HTML und entfernen Sie Ihren Artikel mit einem Klick Ereignis, jetzt sind Sie keine Click-Ereignisse auslösenden:

<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

Hier ist Ihre Antwort, Genießen

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