php - ページ全体をリロードせずにxmlhttp/ajaxで削除した後にファイル/画像ギャラリーを更新する方法は?

Question

長い質問で申し訳ありません。私は説明しようとします。

要素の上にカーソルを置いたときに表示される画像のリストを作成しました (css を使用)。各画像は、選択してフォームの一部として使用するラジオ ボタンでもあります。すべての画像は基本的に、アップロードできる特定のディレクトリ内のすべての画像です。

各画像の横に「削除」ボタンを追加することができました。これにより、phpスクリプトを呼び出してページをリロードせずにその特定の画像を削除する関数がトリガーされます。正常に動作する xmlhttp. を使用します。

ただし、画像のリストは更新されません。画像のように、削除したばかりの要素にカーソルを合わせると、ページが更新されるまで表示され、リストが更新されます。

明らかに、私はページを更新したくありません。それが ajax を使用する全体のポイントでした。だから私ができることはありますか？コードは以下のとおりです。

<script>
function deleteImage(){
 var answer =  confirm('Are you SURE you wish to delete this?')
 if (answer) {
   var image = document.getElementById('filepath').value;
   var xmlhttp;
     if (window.XMLHttpRequest)
     {
     xmlhttp=new XMLHttpRequest();
     }
     else
     {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("uploadmsg").innerHTML=xmlhttp.responseText;
     }
    }
  xmlhttp.open("POST","delete.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("image="+image);
}
}

次に、php/html ですべてを呼び出します。

<?php
  $dir = "../images/";      
  $dh = opendir( $dir );
  while( $filename = readdir( $dh ) ) {
       $filepath = $dir.$filename;
       $gallery[] = $filepath;
       $list[] = $filename;           
  }
  sort( $gallery );
    sort( $list);
  $num_pics = count($gallery);
?>

<div id='chooseimg'  ><input type="text" value="Choose Image"><span><ul>        
<?php

$a = 2;
while($num_pics > $a)
{
    ?> 
    <li>
<input type='radio' name='image' value='<?php echo $list[$a]; ?>'>
<?php echo $list[$a]; ?> 
<div id='imglist'><img src='<?php echo$gallery[$a]; ?>' /></div>
<button type='button' onclick="deleteImage()">Delete</button> 
<input type="hidden" id="filepath" value="<?php print $gallery[$a]; ?>"/> </li>
    <?php
    $a ++;  }   
        ?>
</ul></span></div>
<div id="uploadmsg"> </div>

ファイルdelete.phpには次が含まれます。

<?php 
$image = $_POST['image'];
if (!empty($image)){
unlink($image);
echo "<b>Image deleted<b>";
}
?>

ホバーオーバーを機能させるためのcssは、基本的にspandiv内に#chooseimage設定されていますleft:99999px;が、移動すると、それについてこれhover以上 の情報は必要ないと思いますが、必要な場合はお知らせください。chooseimgleft:0px;

補足として、これが実際にajaxかどうかはわかりませんか？多分誰かが私のために明確にすることができます.

あなたが助けてくれれば、私はとても感謝しています. 私は何時間もグーグルで検索しましたが、何も見つかりません。