Delete the appropriate row of a table from javascript

Question

I have created an upload method that upload files automatically from javascript by calling a webservice. As it is an automatic upload I want to add a delete button to allow users to delete their uploaded files. So the process is:

• choose file, when onchange event is fired file is uploaded by calling the webservice (That's the automatic upload)
• Webservice response is an object composed of two Strings variables
• On success I am creating a single row, filling it by the returned response and adding it to an existing table.
• I want to add for each row a delete button to delete the uploaded file by catching the appropriate values of this row. So my question is: how can I catch the appropriate values whenever I click on a delete button in that row?

Below is my javascript code:

function UploadFiles() {
if (window.FormData !== undefined) {

                var fileUpload = $("#FileUpload1").get(0);

                var files = fileUpload.files;


                var fileData = new FormData();

                fileData.append(files[0].name, files[0]);


                fileData.append('username', 'Test');

                $.ajax({
                    url: 'MyWebservice.asmx/UploadImages',
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: fileData,
                    dataType: "text",
                    success: function (response) {

                        var xmlDoc = new DOMParser().parseFromString(response, "application/xml");
                        var objElementSuccess = xmlDoc.getElementsByTagName("Success")[0];
                        var textElementSuccess = objElementSuccess.childNodes[0];

                        var objElementUpload = xmlDoc.getElementsByTagName("UploadedURL")[0];
                        var textElementUpload = objElementUpload.childNodes[0];

                        var tableBody = document.getElementById("Tab_UploadedFiles");
                        tableBody.style.display = "inline";
                        var tr = document.createElement('TR');

                        var tdSuccess = document.createElement('TD');
                        var tdUploadedFiles = document.createElement('TD');
                        var tdButtonDelete = document.createElement('TD');

                        tdSuccess.appendChild(document.createTextNode(textElementSuccess.nodeValue));
                        tdUploadedFiles.appendChild(document.createTextNode(textElementUpload.nodeValue));
                        tdButtonDelete.style.textAlign = "center";

// here I am adding the delete button .. what should I do here?                 
//  tdButtonDelete.innerHTML = '<input value ="Delete File" onclick="DeleteUploadedFile()" type="button" />';

                        tr.appendChild(tdSuccess);
                        tr.appendChild(tdUploadedFiles);
                        tr.appendChild(tdButtonDelete);

                        tableBody.appendChild(tr);
                    },
                    error: function (err) { alert(err.statusText); }
                });

            } else {
                alert("FormData is not supported.");
            }
        }

Below is my table:

<table id="Tab_UploadedFiles" class="Tab_UploadedFiles">
  <tr>
      <th>
          File Name
      </th>
      <th>
          Status
      </th>
      <th>
          Delete Uploaded File
      </th>
 </tr>
</table>

Answer 1

When you create the table row for the specific entry, you might want to add a unique identifier (such as an id or name) to the row's id attribute like so:

<tr data-id="unique_number">
    <td>FileName</td>
    <td>Status</td>
    <td>Delete button</td>
</tr>

That way, you can listen to the on click event of the button and ask the parent's id (in your case the id of the tr element) and use that id to communicate to the webservice which image to delete.

Another way to do this is check the index of the tr in the table. However, this is a "dirty" way to do so since you can never be 100% this is always correct.

EDIT:

to get the data-id, you can do the following:

var button = [code here to get the button]

$(button).on('click', function(){

    var id = $(this).parent().data('id'); //get the parent of the delete button (the tr element) and get the value of the data property 'data-id'

    //add the rest of your logic here
});