2行目の削除メッセージのみを表示します

Question

以下は、削除メッセージ '$(".imagemsg" + counter).html(data);'を表示しているコードです。しかし、ファイルが2番目の行でのみ削除された後に削除メッセージを表示しています。これは間違っています。ファイルが削除された行にのみ表示する必要があります。

たとえば、ファイルが3行目から削除された場合は、3行目にメッセージが表示され、6行目からファイルが削除された場合は、6行目などに削除メッセージが表示されます。ファイルがどの行から削除されても、2行目だけが削除メッセージを表示します。

var counter = 0; 

function stopImageUpload(success, imagefilename){ 

     var result = ''; 
     counter++; 

     if (success == 1){ 
     result = '<span class="imagemsg'+counter+'">The file was uploaded successfully!</span><br/><br/>';  
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
     } 
     else { 
     result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>'; 
     } 


     $(".deletefileimage").on("click", function(event) { 

     var image_file_name = $(this).attr('image_file_name'); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
     .done(function(data) { 
     $(".imagemsg" + counter).html(data); 
     }); 

     $(this).parent().remove(); 

    }); 

     return true; 
} 

結果変数はimageupload.phpにここに呼ばれている：

CALLBACK：

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script> 

Answer 1

このアプローチは、全体的に理想的ではありません。より良いアプローチはおそらくそれらにすべて同じクラスを与え、適切な要素を見つけるためにparent、find、childrenなどのようなものを使用することでしょう。

しかし、大規模なコードをオーバーホールせずに、私は薄く、これはそれを修正する必要があります

var _counter = counter; 

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) { 
    var image_file_name = $(this).attr('image_file_name'); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
     .done(function(data) { 

     $(".imagemsg" + _counter).html(data); 
    }); 

    $(this).parent().remove(); 
}); 

を基本的にクリックハンドラにのみ該当するボタンに添付され、適切なcounter値が使用されます。