jQuery onClick hide <div>

Question

I can't quite figure out why my jQuery isn't removing/hiding a specific div I've looked at several examples and it should work perfectly fine. This is done on jQuery on Drupal 7. Here's the site in which its live on: http://mahonysbeta.scdmarketing.com/

HTML

<div id="closingnote">
<div class="xbutton">X</div>
<img class="note" src="/sites/default/files/ClosingNote.png">
</div>

CSS

/*closing note*/
#closingnote {
    left: 20%;
    position: absolute;
    top: 175px;
    z-index: 9999;
}

.xbutton {
    position: absolute;
    padding: 3px 5px 0px; 
    left: 237px; 
    top: 10px;
    color: black;
    border: 1px black solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 10px;
}

JS

(function ($) {
    $('.xbutton').click(function(){
        $('#closingnote').remove();
    });
})(jQuery);

Answer 1

The code you've provided works fine .

If you're dynamically adding your "closingnote" or "xbutton" divider, you'll need to delegate the click event to an ancestor which was created prior to that being added to the page using jQuery's on() method :

$('body').on('click', '.xbutton', function() {
    $('#closingnote').remove();
});

If this still doesn't work, one can only conclude that you've either forgotten to include jQuery, have included jQuery after your code or are using multiple elements with the same id .

Check your browser's JavaScript console to see if any errors are being thrown, and ensure that your id s are unique.