После функции append удалить элемент который появился

[shaltay]

Доброго времени.
Есть скрипт:

$(document).ready(function() {

$('.elem').click(function(){
	$('#itog').append('<div class="work">надпись</div>');
});

$('.work').click(function(){
	$(this).hide();
});	

});

Но этот код не работает. Дивы появляются, но уже не удаляются. В чем дело?
Заранее спасибо!

[ASerputko]

Используй $(this).remove();
вместо $(this).hide();

$(document).ready(function() {
$('.elem').click(function(){
	$('#itog').append('<div class="work">надпись</div>');
});
$('.work').click(function(){
	$(this).remove();
});
});

[shaltay]

СПасибо за совет, но так тоже не работает. Да и хотелось бы вообще fadeOut сделать, но так тоже не работает.

[walik]

Вы вешаете событие до того как элемент был добавлен на страницу.
Попробуйте так:

$(document).ready(function() {
 
$('.elem').click(function(){
    $('#itog').append('<div class="work">надпись</div>');
    $('.work').click(function(){
         $(this).hide();
    });
});
});

[shaltay]

Вы вешаете событие до того как элемент был добавлен на страницу.

Вот теперь работает все! Спасибо большое!

[kalina]

При многократном нажатии Append дублируется. Как этого избежать?
Прошу помощи...

[nikita.mmf]

1-ый способ:

$(document).ready(function() {
  $('#itog').delegate(".work", "click", function( e ){
    $(e.currentTarget).hide();
  });
  $('.elem').click(function(){
    $('#itog').append('<div class="work">надпись</div>');
  });
});

2-ой способ:

$(document).ready(function() {
  $('.elem').click(function(){
    $('<div class="work">надпись</div>')
      .click(funcion(){$(this).hide();})
      .appendTo('#itog');
  });
});

[kalina]

Не работают... Ни тот ни другой

[walik]

$(function() {
	$('.elem').click(function() {
		if (!$(this).has('.work').length)
			$('<div class="work">Work</div>').appendTo('.elem');
	});
	$('.work').live('click', function() {
		$(this).hide();
	});
});

[kalina]

Работает!

$(this).hide();

видимо лучше заменить на

$(this).remove();

Спасибо!