removing a cloned element

I have been trying to figure this out for a week now so I've come here. I have a function that I want to clone a list item after an image has been clicked and append the list item elsewhere... this is working, but i am having trouble doing the opposite... I have it wrapped in a toggle function but i can't seem to remove the appended cloned element and my original list element seems to disappear also...

$("document").ready(function() {

 $('#aleHouseStar').toggle(blue, white);

 function blue(evt) {
  $('#aleHouseStar').toggleClass('blue').attr("src", "iscroll/images/bluestar40.png");
  $("#barlist li[id='aleHouseList']").toggleClass('fav');
  $("#barlist li[class=fav]").clone().appendTo("#favorites ul[class=edgetoedge]");

 }

 function white(evt) {
  $('#aleHouseStar.blue').removeClass('blue').attr("src", "iscroll/images/whitestar40.png")
  $("#barlist li[class=fav]").removeClass('fav');
  $("#favor开发者_如何学JAVAites ul[class=edgetoedge]").remove("li [id=aleHouseList]");
 }
});

any help would be appreciated

---

When cloning and appending, I think you still have the original li element in the list, so you are removing both. You need to make sure you only select the 1 element you want.

You can do:

$("#favorites ul[class=edgetoedge]").remove("li [id=aleHouseList]:eq(1)");

For example, which will remove the 2nd li with that ID.

P.S. You shouldn't have more than one element with the same ID.

---

It is happenning because you are trying to remove clonned element (that is created after dom is loaded) but your function will handle only the exist elements (it is why your original list element seems to disappear) while dom is loaded so you should try .live method.

You can get some information from there about Custom Event Binding.
I can't send code because i am still try to achieve success in my project / i mean same problem for me ;)

Edit : Also check this post