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

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

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 15, 2013 at 14:54 James Donnelly 129k3535 gold badges215215 silver badges223223 bronze badges asked Oct 10, 2013 at 16:57 DarthfuzzyDarthfuzzy 3111 silver badge77 bronze badges 6

• Your code works isolated: jsfiddle/ts4u6. What error(s) are you getting? – Jasper Commented Oct 10, 2013 at 16:59
• Are you dynamically adding the div by any chance? – PeeHaa Commented Oct 10, 2013 at 17:02
• None. No errors, and no the divs are not dynamically added. Both are made to the Drupal html.tpl.php file. – Darthfuzzy Commented Oct 10, 2013 at 17:16
• This is conflict issue... I've tried the same script in your site, just using jQuery instead of $ and it worked fine. – Claudio Holanda Commented Oct 10, 2013 at 17:21
• So how should the JS appear? 'jQuery('.xbutton').click(function(){ jQuery('#closingnote').remove(); });' ? @Kazzkiq – Darthfuzzy Commented Oct 10, 2013 at 17:30

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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 ids are unique.