JQuery delete table row dynamically

Question

I am building a website which is in need of dynamic deletion of tables. I am using Bootstrap for the CSS and JQuery 1.11.2 as the brains. I am also using Parse.com but all that is working fine on all my other pages. The issue is not with loading any of my JQuery code, but the activation of this specific role in deleting a given row without knowing the ID.

I hid the 'page' called "Create Bowls" but it can be access by clicking on the right hand navigation bar.

I should be able to click on this delete button and the row be removed accordingly. enter image description here

The HTML I am working with is this:



  
    
    
    
    
    
    
    

    Off Canvas Template for Bootstrap

    
    

    
    

    
    
  

  
    
    
      
        
          
          DePauw Prindle Ethics Bowls
        
        
          
            Dashboard
            Settings
            Profile
            Help
            Log Out
          
          
        
      
    
    

      

        
          
            
          

          
          
            
            Take a look around. Here you can coordinate ethics bowl with the simplicity and power of our web application.
          

          
          
            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

            
              Heading
              Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
              View details »
            

          


          
          
            
                 
                    Ethic Bowls
                    
                
            

            

            
                
                    
                        
                        Title
                        Location
                        Date
                        Actions
                        
                    
                    
                        
                        tempTitle
                        tempLocation
                        tempDate
                        
                            
                                
                                
                                    
                                    

                                    
                                    

                                    
                                
                            
                               
                    
                    
                    
            


          


        


        
        
          
            Home
            Create Bowls
          
        

      


      

      
        © DePauw University 2015

The problem is when I try to click on Actions -> Delete in the row, it does nothing. I am trying to use $(this).closest('tr').remove(); but part of the problem is that it never seems to be called despite referencing the proper generic ID. Am I referencing it wrong or something? I am dynamically adding rows with the onclick function "#dashboard_add_ethic_bowl".

 $(function() 
{

    $('[data-toggle="offcanvas"]').click(function () {
        $('.row-offcanvas').toggleClass('active')
    });

    $("#dashboard_nav_home").click(function(event)
    {
        // http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
        event.preventDefault();
        showHome();
        hideAddCoachSchool();

    });

    $("#dashboard_nav_ethic_bowls").click(function(event)
    {
        event.preventDefault();
        $("#dashboard_content_home").hide();
        $("#dashboard_ethic_bowls").show();
    });


    // TODO: these arent working yet

    // http://stackoverflow.com/questions/23249130/delete-table-row-using-jquery
    $(".btn btn-danger").click(function(){ 
        alert('awwwwww');
    });


    $('#deleteBowl').click(function (event) {
        event.preventDefault();
        alert("aa");
        $(this).closest('tr').remove();
        return false;
    });

    $("#dashboard_add_ethic_bowl").click(function(event)
    {
        event.preventDefault();
        var rowContent = '' +
            '' + 'tempTitle' + '' +
            '' + 'tempLocation' + '' +
            '' + 'tempDate' + '' +
            '' +
                '' +
                        '' +
                        '' +
                        '' +
                        '
' +
                        '' +
                        '
' +
                        '' +
                        '' +
                '' +
            '' +       
        '';
        $("#dashboard_ethic_bowl_list").show();
        $('#dashboard_ethic_bowl_rows').append(rowContent);
    });

    // declare simple log out
    $("#dashboard_log_out").click(function(event) 
    {
        event.preventDefault();
    });

}

function hideHome()
{
    $("#dashboard_content_home").hide();
}

function showHome()
{
    $("#dashboard_content_home").show();
}

function hideAddCoachSchool()
{
    $("#dashboard_ethic_bowls").hide();
}

function showAddCoachSchool()
{
    $("#dashboard_ethic_bowls").show();
}

EDIT: I just tried now with a hardcoded row inside the HTML which works with the onclick and removal but not if I add them dynamically by clicking on the big "+" button. Is there a proper way to reference a dynamically added row to be deleted?

Zee · Accepted Answer

Use event delegation for dynamically created elements:

    $('#dashboard_ethic_bowl_list').on('click','.btn', function(event){
        event.preventDefault();
        alert("aa");
        $(this).closest('tr').remove();
        return false;
    });

Also use UNIQUE IDs.

Your id="deleteBowl" is repeated each time you add a new row dynamically. ID needs to be UNIQUE. Better make it a class and use it.

...

JQuery delete table row dynamically

Answers (2)

Related Questions