CODEWITHSUNDEEP
javascripthtmljquery
Jabir Fatah
Jabir Fatah

Reputation: 65

How to parmanently remove element from DOM on button click?

I have a <tr> that contains several <td>, and each <td> is populated with some data that are retrieved form MySQL. I added a delete button and when the button is clicked I want the particular data (in <td>) to be permanently deleted. It doesn't have to be deleted from database or server's folder, only permanently disappearing the <td> is enough, so that it doesn't reappear in next refresh.

I have tried in so many different ways and none of them seem to work. Could someone please have a look on this issue?

Here is what I have tried.

<tbody>
   <?php
      $i = 1;
      while ($row = mysqli_fetch_array($result)) {
          ?>
   <tr>
      <td><?php echo $i++; ?></td>
      <td><?php echo $row['filename']; ?></td>
      <td><a href="uploads/<?php echo $row['filename']; ?>" target="_blank">View</a></td>
      <td><a href="uploads/<?php echo $row['filename']; ?>" download><i class = "fa fa-download"></i></a></td>
      <td id = "deleteData">
         <!--trying to delete the file: starts-->
         <button type="button" class="btn btn-danger btnDeleteData" onclick="deleteFile">Delete</button>
         <script> 
            $('.deleteFile').on('click', function () {
            $('td#deleteData').remove();      
              });                                       
         </script>
         <!--trying to delete the file: ends-->
      </td>
   </tr>
   <?php } ?>
</tbody>

Upvotes: 0

Views: 117

Answers (1)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

Once you have built your table in PHP, you need to add an onclick-event listener to the 'Delete' buttons. When the button is clicked, you need to remove the closest tr, e.g.

document.querySelectorAll('.delete-row').forEach(button => {
  button.addEventListener('click', function() {
    this.closest('tr').remove();
  });
});
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete-row">Delete</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete-row">Delete</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete-row">Delete</button></td>
  </tr>
  <tr>
    <td>Row 4</td>
    <td><button class="delete-row">Delete</button></td>
  </tr>
</table>

Upvotes: 1

Related Questions