Удалить соответствующую строку таблицы из javascript

Question

Я создал метод загрузки, который автоматически загружает файлы из javascript, вызывая веб-сервис. Поскольку это автоматическая загрузка, я хочу добавить кнопку удаления, чтобы пользователи могли удалять свои загруженные файлы. Таким образом, процесс:

• выбрать файл, когда OnChange событие генерируется файл загружается с помощью вызова веб-сервиса (Это автоматический загрузка)
• ответ Webservice является объектом, состоящим из двух строк переменных
• В случае успеха Я создаю одну строку, заполняя ее возвращенным ответом и добавляя его в существующую таблицу.
• Я хочу добавить для каждой строки кнопку удаления, чтобы удалить загруженный файл, поймав соответствующие значения этой строки. Поэтому мой вопрос: как я могу улавливать соответствующие значения всякий раз, когда я нажимаю кнопку удаления в этой строке?

Ниже мой Javascript код:

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."); 
      } 
     } 

Ниже мой стол:

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

Answer 1

При создании строки таблицы для конкретной записи, вы можете добавить уникальный идентификатор (например, идентификатор или имя) для атрибута идентификатора строки следующим образом:

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

Таким образом, вы можете прослушивать событие щелчка кнопки и запрашивать идентификатор родителя (в вашем случае идентификатор элемента tr) и использовать этот идентификатор для связи с веб-сервисом, которое для удаления изображения.

Другой способ сделать это - проверить индекс tr в таблице. Однако это «грязный» способ сделать это, так как вы никогда не сможете быть на 100%, это всегда правильно.

EDIT:

, чтобы получить данные идентификатор, вы можете сделать следующее:

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