How do I remove HTML that I place dynamically with JQuery

lets say i have fallowing html...

<li><a href="#" id='DataSheets' >Data Sheets</a><font class="leftNavHitsFont">- (1)</font></li>
<li><a href="#" id='ApplicationNotes' >Application Notes</a><fontclass="leftNavHitsFont">- (6)</font></li>

what i want to do is, add a html on onclick of these links, if you click on first link output should look like

<li><span>ajksdfskaj</span></li>  
<li><a href="#" id='ApplicationNotes' >Application Notes</a><fontclass="leftNavHitsFont">- (6)</font></li>

means hide the original html of that li and append new html for ex. a span as i have written above...and if i clicked on second link the first li should get it's original html and appended html should get removed and get appended to current li bieng clicked..in this case output should look like...

<li><a href="#" id='DataSheets' >Data Sheets</a><font class="leftNavHitsFont">- (1)</font></li>
<li开发者_开发问答><span>ajksdfskaj</span></li>

i tried to achieve this thing through variuos way...but could not find out the correct way..

please help me out guys.. Thanks in advance!!!!

This should do it:

$('li > a').live('click', function () {
    $(this).parent().siblings('li').find('a, font').show().end().find('span').remove();
    $(this).parent().append('<span>ajksdfskaj</span>').find('a, font').hide();
});

I used .live() because it seems like you're adding the <a> dynamically, though if that's not the case, .click() will suffice.

Demo: http://jsfiddle.net/VewSL/1/

to build upon Box9's code:

var prevClickedLink = null;
var prevHTML = null;

$('a').live('click', function(){
 if( prevClickedLink ){
  //restore the previous html
  prevClickedLink.html(prevHTML);
 }

 prevClickedLink = $(this).parent();
 prevHTML = prevClickedLink.html();

 prevClickedLink.empty().append('<span>blabla</span>');
});

<ul>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
</ul>

Try following..

$(document).ready(OnDocumentReady);


var g_sInnerHTML = "ajksdfskaj"
var g_sPrevInnerHTML_li = "";
var g_oPrevLi = null;

function OnDocumentReady()
{
  $('li').click(On_Li_Click);
}

function On_Li_Click()
{
    if(g_oPrevLi != null && 
       g_oPrevLi != undefined &&
       g_sPrevInnerHTML_li != "")
    {
      // Reset the text of previous "li"..
      $(g_oPrevLi).html(g_sPrevInnerHTML_li);
    }
    g_sPrevInnerHTML_li = $(this).html();
    g_oPrevLi = $(this);
    $(this).html(g_sInnerHTML);
}