strange browser behavior when removing elements from page with jquery

topz

New Member
I have an application that allows users to comment on text documents (like google docs). I am experiencing some strange behavior when i allow users to remove those comments from the page. On request for removal, i run some code that goes through and extracts the original content from the comment and then removes the comment from the page.the removal code looks like this\[code\]html = html + $(this).html()$(this).children().andSelf().unbind();$(this).contents().unwrap()$(this).remove()\[/code\]the code was extracted from a larger piece of code, but i dont believe the rest of that code to be necessary to isolate this issue. in fact, im not even sure if this code is necessary to fix it. anyways, the problem occurs when a user deletes a comment (using the above code) and then tries to leave another comment in the same place. no matter what they try to leave a comment on, if it even contains a part of the content from the old comment the browser will automatically select all of the content from the old comment. the strange thing is that i have scanned the html thoroughly, and there are no html-based remnants of the old comment. all that remains in the browser (when i inspect element) is broken quotes where the comment used to begin and end. here is an extracted excerpt with the comment in place (it is the span with an hl class)\[code\]<span class="T1">Lorem ipsum hendrerit in <span class="hl s_240" highlight_id="s_240"> <span class="remove_highlight" style="display: none;">Remove</span> "vulputate" </span> velit esse</span>\[/code\]here is the extracted code after the comment was removed\[code\]<span class="T1">Lorem ipsum "vulputate" velit esse </span>\[/code\]notice the quotes around the previously highlighted wordand here is what happens when i leave a new comment, selecting only the e in veluptuate and the v in the following word\[code\]<span class="T1">"Lorem ipsum hendrerit in " <span class="hl new_hl s_421" highlight_id="s_421"> <span class="remove_highlight">Remove</span> "vulputate v" </span> "elit esse"</span>\[/code\]as you can see, the browser will automatically assume i wanted to highlight the entire word vulputate even though i only selected part of it.if anybody can tell me why this is happening or how to fix it, i would be so grateful!
 
Top