Question

I have a script who creates a popup delays 3000 and appears in my site , the problem is that i cant remove it, here is my script

html

 <div id="growl"></div>

css

#growl {
position: absolute;
padding:5px;
bottom: 0;
right: 5px;
width: 320px;
z-index: 10;
}

.notice {
 position: relative;
 min-height: 30px;
 padding:5px;
 }

 .skin {
 position: absolute;
 background-color: #000000;
 bottom: 0;
 left: 0;
 opacity: 0.6;
 right: 0;
 top: 0;
 z-index: -1;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
 }

the button to close

 .close {
 background: transparent url('../img/egrowl.png') 0 0 no-repeat;
 text-indent: -9999px;
 position: absolute;
 top: 2px;
 right: 2px;
  width: 26px;
 height: 26px;
 }

my script

 $(document).ready(function(){

the delay

setTimeout(function() {

addNotice('<p>Do not Forget To Become A member </p><a href="subscribe.php">Subscribe</a>');

},3000);

the close function

$('#growl')
.find('.close')
.on('click', function() {
    $(this)
        .closest('.notice')
        .animate({
            border: 'none',
            height: 0,
            marginBottom: 0,
            marginTop: '-6px',
            opacity: 0,
            paddingBottom: 0,
            paddingTop: 0,
            queue: false
        }, 2000, function() {
            $(this).remove();
        });
   });
      });

settings

 function addNotice(notice) {
$('<div class="notice"></div>')
    .append('<div class="skin"></div>')
    .append('<a href="#" class="close">close</a>')
    .append($('<div class="content"></div>').html(notice))
    .hide()
    .appendTo('#growl')
    .fadeIn(1000);
 }

Answer 1

there’s more stuff that was wrong in your setup. I’ve created this fiddle:
http://jsfiddle.net/CyJRF/2/

you are binding a click event to the ‘.close’ element, but you are doing it at $(document).ready(), before that element has been created inside ‘addNotice’.
I’ve moved around some of the javascript…

And as @Jordan rightly noted, you need to change $(this). I’m just using $("#growl .notice") for this now