Question

I have an issue when it comes to deleting a file . I have an application [here][1].

To use the app, click on the “Add” button and a table row would appear which contains a file input. Please upload a couple of small files using the file input and clicking on the “Upload” button. Now you realise when you upload a file, the name of the file appears below within the table row and each file name contains it’s own “Delete” button.

Now the problem is lets say you want to delete a file name, when you click on the “Delete” button, it gets rid of all of the file names which is incorrect. It should only delete the file name you wanted to delete. Also after deleting a file name if you try and upload another file, the file name does not appear below.

So my question is that what is the correct way I should do this so that when the user deletes a file name, it only deletes the file name it is associated to and not all file names? After deleteing a file name when the user uploads another file, it should show the file name of that file.

Below is the code where the filename, delete button and horizontal line is appended in:

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

Below is the javascript code:

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;   
}

Answer 1

What you should do is wrap each file/deletebutton in their own div and delete that div when the user presses delete.

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

And in the click event

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