Can't remove item in connect list!
I have a small code.
-
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list2 li a").click(function(){
$(this).parents("li:#"+this.parentNode.id).remove();
});
});
$(function(){
$('#list1 > li').draggable({helper:'clone',connectToSortable:'#list2'});
});
$(function(){
$('#list2').sortable({
update : function (event, ui) {
ui.item.append(' <a id="'+(ui.item[0].id.toString())+'" href="#">X</a>');
}
});
});
</script>
</head>
<body>
<ul style="position:absolute;border:solid gray; width: 380px;height: 100px;" id="list1">
<li id="1"><span id="1">A</span></li>
<li id="2"><span id="2">B</span></li>
<li id="3"><span id="3">C</span></li>
<li id="4"><span id="4">D</span></li>
</ul>
<ul style="top:140px;position:absolute;border:solid gray; width: 380px;height: 100px;" id="list2">
<li id="5"><span id="5">E <a id="5" href="#">X</a></span>
</ul>
</body>
</html>
Remove existed item in list 2 is OK.
When i drag item in list1 to list 2 and remove it is nothing.
Can you help me, please?