Question 69756 in Ajax Question posted in
You can find the official documentation here.

Deleting a HTML table row on successful ajax request – Jquery ajax

This below code i am using to create a dynamic table on search results. its basically a jquery code which takes the search results from the backend and creates a table

$('#search-movie').on('submit',function (e) {
                 $.ajax({
                  type: 'POST',
                  url: '/search',
                  data: $('#search-movie').serialize(),
                   success: function (q) {
                   
                    var trHTML='';
                    $.each(q, function (i, userData) {
                                for(j=0; j<userData.length; j++)
                                {
                           
                                trHTML +=
                                        '<tr><td style="padding-right: 10px">'
                                        + userData[j].showid
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].typeof
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].title
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].directors
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].cast
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].country
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].releaseyear
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].rating
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].duration
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].listedin
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].description
                                        // + '</td></tr style="padding-right: 10px">'
                                        + '</td><td style="padding-right: 10px">'
                                        + '<button type="button" id="button2" class="btnSelect" onClick="clickme()">delete</button>'
                                        + '</td></tr>'
                                }
                        });
                        $('#table1').append(trHTML);
                   
                   }
                  });
                 e.preventDefault();
                 });
            
            })
            </script>

I am working on deleting a table row on successful ajax response from backend api. I have tried it but its not deleting the table row in the frontend on success ajax response.

$(document).ready(function() {

  $("#table1").on('click', '.btnSelect', function() {

    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").text();
    var showid = col1

    $.ajax({
      url: '/delete_movie',
      type: 'POST',
      data: showid,
      success: function(response) {
        alert(response[1]);
        $(this).closest("tr").remove();
      }
    })
  });
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

     <script>
                $(document).ready(function(){

               
                $("#table1").on('click','.btnSelect',function(){
                    
                    var currentRow=$(this).closest("tr"); 
                    
                    var col1=currentRow.find("td:eq(0)").text(); 
                    
                    var showid=col1
                    
                    $.ajax({ 
                            url: '/delete_movie', 
                            type: 'POST', 
                            data: showid,
                            success: function(response){ 
                               alert(response[1]);
                               console.log(this);
                               currentRow.remove(); //changing this line fixes the issue
                            } 
                        })
                });
                });
            </script>


  2. 0

    .closest() cascades upwards in the DOM, including itself, so will not find the <tr>. You could use .find() instead https://api.jquery.com/find/

    Instead of using this, could you target a specific row class or id?

    $("#table1 tr.the-row-class").remove();

    or

    $("#theRowId").remove();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search