jQuery closest() remove() on doesn't work?

Question

Please see this page which has this code:

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

Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?

`this` is not the link within the `href` attribute. It’s `window`. — Sebastian Simon, Dec 19 '16 at 05:39
`href="javascript:..."` is a long out-of-date technique. Don't do it. — nnnnnn, Dec 19 '16 at 05:43

score 3 · Accepted Answer · answered Dec 19 '16 at 05:39

this in href doesn't refers to anchor element, thus it doesn't work. It refers to window.

You should bind element event handler using jQuery.

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>

I will not recommended, However you can use inline onclick handler.

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

madalinivascu · Answer 2 · 2016-12-19T05:49:37.803

1

Detach your javascript from your html and remove your item with a click event, right now you aren't triggering any click events:

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

edited Dec 19 '16 at 05:49

answered Dec 19 '16 at 05:40

madalinivascu

32,064
4
39
55

score 1 · Answer 3 · answered Dec 19 '16 at 05:45

1

Here is your answer, Enjoy

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

answered Dec 19 '16 at 05:45

Nitin Vaghani

297
4
14

jQuery closest() remove() on doesn't work?

3 Answers3