Button behaviour in dialog

Button behaviour in dialog

short description : I'm adding dynamically some elements to a div in a dialog (in this particular case names of courses) with a button to remove them again behind the description of the course. When a user clicks on the button to remove the course, the dialog is closed instead. Is there a way to prevent this behaviour ? The buttons have a specific classname but this is not taken in consideration when clicking on the button.

Example of the code :

1. adding the courses to the div :
  1.     $('#add-course').click(function() {
            var txt = "<div style='float: left; margin: 0px 5px;'><span>"+$('#FldDetail option:selected').html()+" ("+$('#FldDetail').val()+")</span><button class='drop-course'><img border='0' src='images/b_drop.png' alt='"+$('#FldDetail').val()+"' /></button></div>";
            $('#existing-courses').append(txt);
            return false;
        });






2. Action to remove the course again :
  1.     $('button.drop-course').click(function(e) {
            if ($(this).hasClass('drop-course')) {
                //e.preventDefault();
                var answer = confirm('Are you sure you want to delete this course ?');
                if (answer) {
                    $(this).prev('span').remove();
                    $(this).remove();
                }
            }
            return false;
        });












Much obliged if someone has a solution for this.

Thx.