removing a cloned element

Question

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');
  $("#favorites ul[class=edgetoedge]").remove("li [id=aleHouseList]");
 }
});

any help would be appreciated

Answer 1

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.