[RPGonzo]

Ok little background:
I have a image gallery with a admin panel, using JQuery i have a full drag and drop interface going using two unordered list ( one current images in gallery another available images in directory ) The images have 2 attributes that i want to manipulate before uploading everything to the database. As of now im using a couple of inputs on the lower section with a hidden input holding the current img id. Now when the user clicks save options it appends two spans to the current image LI which have ids like "img01.jpgcaption" or "img01.jpgtitle" and have a display none of course so it doesnt intrude on the users display.

My problem here is that i have two lines in the code that is supposed to use remove() if the elements already exist ... that way i only have 1 pair of spans in the LI at any given point. But its not removing instead it just adds another pair of spans into the LI with the updated information mind you but now i have the old and new information.

	$("button#saveImageOptions").click(function() {
		if ($(this).attr("disabled") == "disabled") { return; }
		var curName = $("input[name$='imageName']").val();
		if (curName == "") { return; }
		// we cover the caption first
		var $cspan = $(document.createElement("span"));
			$cspan.attr("id",curName + "caption")
				.css("display","none")
				.html(encodeURIComponent($("input[name$='captionText']").val()));

		var $tspan = $(document.createElement("span"));
			$tspan.attr("id",curName + "title")	
				.css("display","none")
				.html($("input[name$='titleText']").val());
		// now we loop to find which LI to append to 
		$("ul#currentitems li").each(function() { 
			if ($(this).attr("id") == curName) {
				// now we are in the LI make sure the spans done already exist
				$("span#" + $(this).attr("id") + "caption").remove();
				$("span#" + $(this).attr("id") + "title").remove();
				$cspan.appendTo($(this)); $tspan.appendTo($(this)); 
			}
		});
	});

thats the function i made and here is a small clip of the source that shows how most of that code works along with the duplicate spans that im trying to figure out ...

<ul id="currentitems" class="items ui-droppable">
<li id="0002.jpg" class="acepFile ui-draggable addedItem" style="display: list-item;">
0002.jpg
<span id="0002.jpgcaption" style="display: none;">test</span>
<span id="0002.jpgtitle" style="display: none;">test</span>
<span id="0002.jpgcaption" style="display: none;">test2</span>
<span id="0002.jpgtitle" style="display: none;">test2</span>
</li>
</ul>

maybe its something simple but just takes a second pair of eyes to find thanks!

[Wimpy]

After referencing the jquery documentation I must say it should work, but it seems that the jquery.remove() function is a little dodgy, even in the documentation it sometimes does not work as it should! Which is pretty weird! Perhaps you should call in a bug?