Question

See HERE!!!
http://jsfiddle.net/y5gbg/
When I type something, it should append a round div and text. When I click this round div, it should be removed.
This is jquery code:

$(document).ready(function(){


    $("button").click(function(){
     var str;
     str = $('input').val();
     var sth;
     sth = '<div id="'+str+'"><div class="btn" alt="'+str+'"></div><p>'+str+'</p><hr></div>';
     $("#contents").append(sth);
    });

    $('.btn').click(function(){
      var id;
      id = $(this).attr('alt');
      $('#'+id).remove();    
    });

});

But it doesn’t work. Could someone tell me why?
Another thing, how to do linebreak here?
Thanks!!!

Answer 1

you just need to use the live function

$('.btn').live('click', function(){
  var id;
  id = $(this).attr('alt');
  $('#'+id).remove();    
});

because you’re adding the div to the dom dynamically so the click isn’t getting registered to the div

Here’s an example of it working.