listado de ajax que vaya refrescando de a un solo registro

[maximendez88]

hola...tengo un listado en php que lo traigo con ajax, cada vez que guardo un registro en una base de datos... Este listado muestra un boton. el cual debería desaparecer cada vez que lo presiono. Hasta ahi va todo bien, el problema está en que cuando vuelvo agregar datos, se genera nuevamente todo el listado y por ende se generan todos los botones nuevamente. Hay alguna forma de agregar solo el último valor en el listado? asi no se generan todos los botones nuevamente... Dejo mi codigo para ver si alguien me puede dar una mano... saludos...


este es el php que muestra las ciudades y el boton.
circuit_actual.php

Código PHP:

<?php
session_start(); 
include "config.php";
$nombrecir=$_SESSION['namecirc'];
$query = "SELECT city, arrival,departure FROM `sites` WHERE nombreCirc='".$nombrecir."'";
$result = mysql_query($query);
$numero = 0;
?>
<style type="text/css">
    .listado td{
        width:25%;
        font-family:verdana;
    }
</style>
<table class="listado">
<?php 
$row = mysql_fetch_array($result);
 
?>
    <tr>
    <td>
        <b><?php echo $row["city"]?></b><br/>
        Arrival:<?php echo $row["arrival"]?><br/>
        Departure:<?php echo $row["departure"]?><br/>
      <?php 
while($row2 = mysql_fetch_array($result))
{
?>
    <tr>
    <td>
          <a title="TripMinded - Add Transport" id="transportelink" href="addtransport.php" class="ajax cboxElement">
        <input type="button" value="Add Transport"  onclick="this.style.display='none'" id="algo"  /></a>
    
    <br/>
        <b><?php echo $row2["city"]?></b><br/>
        Arrival:<?php echo $row2["arrival"]?><br/>
        Departure:<?php echo $row2["departure"]?><br/>
    </td>
    </tr>
<?php
    $numero++;
}
?> 
    </td>
    </tr>
</table>
<?php  
mysql_free_result($result);
?>
 

y aca esta el ajax

Código Javascript:

function objetoAjax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
 
function save() {
ajax=objetoAjax();
ajax.onreadystatechange=function() {
if (ajax.readyState==4 && ajax.status==200) {
alert("city added successfully");
listar();
  }
 }
var cityvalue=encodeURIComponent(document.getElementById('city').value)
var arrivalvalue=encodeURIComponent(document.getElementById('datepicker_value').value)
var departurevalue=encodeURIComponent(document.getElementById('otrodatepicker_value').value)
var commentvalue=encodeURIComponent(document.getElementById('comment').value)
if(arrivalvalue>departurevalue)
{
    alert('Day of arrival can not be after a day of departure');
}
else if(departurevalue<arrivalvalue)
{
    alert('Day of departure can not be until the arrival day');
}
else{   
  $('#example-placeholder').html('<p><img src="ajax-loader.gif" width="220" height="19" /></p>');
 setTimeout("$('#example-placeholder').hide();", 5000); 
  ajax.open("GET", "addCity.php?city="+cityvalue+"&arrival="+arrivalvalue+"&departure="+departurevalue+"&comment="+commentvalue,true);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  //enviando los valores
  ajax.send()   
  document.getElementById('savecity').disabled = true;
  document.getElementById('more').disabled = true; 
  document.getElementById('ciudad').value = "Select other city";
  document.getElementById('add').disabled = false;   
  document.getElementById('inner').style.display="block";
  document.getElementById('datepicker_value').value='';
  document.getElementById('otrodatepicker_value').value='';
  document.getElementById('comment').value='';
  document.getElementById('close').disabled=false;
}
}
 
function listar(){
  var ajax2 = objetoAjax();
  ajax2.open("POST", "circuit_actual.php",true);
  ajax2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax2.send(null);
  ajax2.onreadystatechange=function() {
  if (ajax2.readyState==4 && ajax2.status==200)
 {                  
        document.getElementById('capa').innerHTML = ajax2.responseText;             
 }
 }
            
 }