Javascript 如何删除一个文件名而不是所有文件名？

我在删除文件时遇到了一个问题。我有一份申请[这里][1]

要使用该应用程序，单击“添加”按钮，将出现一个包含文件输入的表格行。请使用文件输入并单击“上载”按钮上载几个小文件。现在你意识到当你上传一个文件时，文件名会出现在下面的表格行中，每个文件名都有自己的“删除”按钮

现在的问题是，假设您要删除一个文件名，当您单击“删除”按钮时，它会删除所有不正确的文件名。它应该只删除您要删除的文件名。此外，如果您尝试上载另一个文件，则删除文件名后，文件名不会显示在下面

所以我的问题是，我应该怎么做，这样当用户删除一个文件名时，它只删除它关联的文件名，而不是所有的文件名？当用户上传另一个文件时删除一个文件名后，它应该显示该文件的文件名

下面是添加文件名、删除按钮和水平线的代码：

<ul class='listImage' align='left'>

下面是javascript代码：

function stopImageUpload(success, imagefilename){

      var result = '';

      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';      
         $('.listImage').append(htmlEncode(imagefilename) + '<button type="button" name="deletefileimage" class="deletefileimage">Delete</button><br/><hr/>'); 
      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }

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

        $(this).parents("form:first").find(".listImage").replaceWith("");

    });

      return true;   
}

函数stopImageUpload（成功，imagefilename）{
var结果=“”；
如果（成功==1）{
结果='文件已成功上载！

'；
$（'.listImage'）.append（htmlEncode（imagefilename）+'Delete
）；
}
否则{
结果='上传文件时出错！

'；
}
$（.deletefileimage”）。在（“单击”上，函数（事件）{
$（this）.parents（“form:first”）.find（.listImage”）.replacetwith（“”）；
});
返回true；
}

试试这个：

 $(".deletefileimage").on("click", function(event) {
        $(this).closest(".listImage").remove();
    }); 

---

您应该做的是将每个文件/delete按钮包装在各自的div中，并在用户按delete时删除该div。

$('.listImage').append('<div>' + htmlEncode(imagefilename) + '<button type="button" name="deletefileimage" class="deletefileimage">Delete</button><br/><hr/><div>');

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