ура! сам разобрался)) пораскинул мозгами и понял, что объект события же создается несколько раз, значит мое "быстрое решение" не прокатит.. а как же прикрутить обработчик события к append'нутому элементу?
Помогла подсказка, данная
тут
т.е. надо юзать live в таких случаях, итак, вуаля:
http://jsfiddle.net/jRzQb/
Код:
<!DOCTYPE html>
<html>
<head>
<title>add/remove</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var item = '<span class="a" attr="new"><a href="#" class="remove">Удалить</a></span>';
$('.remove').live('click',function(){
$(this).parents('span').remove();
attr = $(this).parents('span').attr('attr');
if (attr != 'new') $('#container').append('<span>'+attr+'</span>');
});
$('#add').click(function(){
$('#items').append(item);
});
});
</script>
<style type="text/css">
span {display:inline-block; margin:10px;}
#items, #container {border:1px solid black;}
#items span a {
background:#dff;
}
a#add {
background:#ffd;
}
#container span {background:#fdf;}
</style>
</head>
<body>
<div id="items">
<span class="a" attr="1"><a href="#" class="remove">Удалить</a></span>
<span class="a" attr="2"><a href="#" class="remove">Удалить</a></span>
<span class="a" attr="3"><a href="#" class="remove">Удалить</a></span>
</div>
<div><a id="add" href="#">Добавить</a></div>
<div id="container">
</div>
</body>
</html>
Единственное не пойму смысла матюков в файрбаге, эксперты подскажите что это значит и какие недостатки в моем коде?
Вчастности матюк выглядит так:
You've used the same selector more than once.
Selector: "#items"
You should only use the same selector more than once when you know the returned collection will be different. For example, if you've added more elements to the page that may comply with the selector
