jQuery closest() remove() on <a> doesn't work?

by 2 replies
3
Please see this page which has this code:

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?
#programming #&lta&gt #<a> #closest #jquery #remove #work
  • Please see this following instruction i hope it's very helpful for you.

    Thank you

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
    <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="#" id="your_id_name" class="pure-button danger">X</a>
    </div>
    <script>
    $(document).ready(function(){
    $('#your_id_name').on('click', function(e){
    e.preventDefault();
    $(this).closest('.query-brand-by-column').remove();
    });
    });
    </script>
    </div>
    </body>
    </html>
    • [1] reply
    • anuislam has it right. You should do your JS in a script tag seperate from your link. Jquery makes it so easy with css selectors too.
  • Banned
    [DELETED]
Join the discussion

Next Topics on Trending Feed

  • 3

    jQuery closest() remove() on <a> doesn't work?

    Please see this page which has this code: 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?