title: JQuery delete table row dynamically
body: <p>I am building a website which is in need of dynamic deletion of tables. I am using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap</a> 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. </p>
  
  <p>I hid the 'page' called "Create Bowls" but it can be access by clicking on the right hand navigation bar.</p>
  
  <p>I should be able to click on this delete button and the row be removed accordingly.<img src="https://i.stack.imgur.com/uZcbE.png" alt="enter image description here"> </p>
  
  <p>The HTML I am working with is this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="../../favicon.ico"&gt;
  
      &lt;title&gt;Off Canvas Template for Bootstrap&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom styles for this template --&gt;
      &lt;link href="css/custom/dashboardMain.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!-- navigation bar at the top --&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="" id="dashboard_home_title_link"&gt;DePauw Prindle Ethics Bowls&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="" id="dashboard_log_out"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;!--&lt;form class="navbar-form navbar-right"&gt;
              &lt;input type="text" class="form-control" placeholder="Search..."&gt;
            &lt;/form&gt; --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="container"&gt;
  
        &lt;div class="row row-offcanvas row-offcanvas-right"&gt;
  
          &lt;div class="col-xs-12 col-sm-9"&gt;
            &lt;p class="pull-right visible-xs"&gt;
              &lt;button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"&gt;Toggle nav&lt;/button&gt;
            &lt;/p&gt;
  
            &lt;!-- Giant intro --&gt;
            &lt;div class="jumbotron"&gt;
              &lt;h1 id="dashboard_title_intro"&gt;&lt;/h1&gt;
              &lt;p&gt;Take a look around. Here you can coordinate ethics bowl with the simplicity and power of our web application.&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;!-- HOME CONTENT --&gt;
            &lt;div class="row" id="dashboard_content_home"&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
              &lt;div class="col-xs-6 col-lg-4"&gt;
                &lt;h2&gt;Heading&lt;/h2&gt;
                &lt;p&gt;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. &lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!--/.col-xs-6.col-lg-4--&gt;
            &lt;/div&gt;&lt;!--/row--&gt;
  
            &lt;!-- Ethic bowl CONTENT --&gt;
            &lt;div class="row" id="dashboard_ethic_bowls"&gt;
              &lt;div class="row placeholders"&gt;
                  &lt;div class="col-md-12 text-center"&gt; 
                      &lt;h1&gt;Ethic Bowls&lt;/h1&gt;
                      &lt;button type="button" class="btn btn-lg btn-info" id="dashboard_add_ethic_bowl"&gt; + &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- the list of ethic bowls for a given user --&gt;
  
              &lt;div class="table-responsive foo"&gt;
                  &lt;table class="table table-striped" id="dashboard_ethic_bowl_list"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                          &lt;th&gt;Title&lt;/th&gt;
                          &lt;th&gt;Location&lt;/th&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Actions&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="dashboard_ethic_bowl_rows"&gt;
                          &lt;tr&gt;
                          &lt;td&gt;tempTitle&lt;/td&gt;
                          &lt;td&gt;tempLocation&lt;/td&gt;
                          &lt;td&gt;tempDate&lt;/td&gt;
                          &lt;td&gt;
                              &lt;div class="btn-group"&gt;
                                  &lt;button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;"&gt;
                                      &lt;span&gt;Actions&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/button&gt;
                                  &lt;ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;"&gt;
                                      &lt;li&gt;&lt;button class="btn btn-primary"&gt;View&lt;/button&gt;&lt;/li&gt;
                                      &lt;br&gt;
                                      &lt;li&gt;&lt;button class="btn btn-warning"&gt;Edit&lt;/button&gt;&lt;/li&gt;
                                      &lt;br&gt;
                                      &lt;li&gt;&lt;button class="btn btn-danger" id="deleteBowl"&gt;Delete&lt;/button&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;       
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;    
              &lt;/div&gt;&lt;!--/dashboard_ethic_bowl_list--&gt;
  
            &lt;/div&gt;&lt;!--/dashboard_ethic_bowls--&gt;
  
          &lt;/div&gt;&lt;!--/.col-xs-12.col-sm-9--&gt;
  
          &lt;!-- left side navigation bar for content area --&gt;
          &lt;div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"&gt;
            &lt;div class="list-group"&gt;
              &lt;a href="#" class="list-group-item" id="dashboard_nav_home"&gt;Home&lt;/a&gt;
              &lt;a href="#" class="list-group-item" id="dashboard_nav_ethic_bowls"&gt;Create Bowls&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!--/.sidebar-offcanvas--&gt;
        &lt;/div&gt;&lt;!--/row--&gt;
  
        &lt;hr&gt;
  
        &lt;footer&gt;
          &lt;p&gt;&amp;copy; DePauw University 2015&lt;/p&gt;
        &lt;/footer&gt;
  
      &lt;/div&gt;&lt;!--/.container--&gt;
  
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/parse/dashboardMainjs.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="../../assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is when I try to click on Actions -> Delete in the row, it does nothing. I am trying to use <code>$(this).closest('tr').remove();</code> 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". </p>
  
  <pre><code> $(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 = '&lt;tr&gt;' +
              '&lt;td&gt;' + 'tempTitle' + '&lt;/td&gt;' +
              '&lt;td&gt;' + 'tempLocation' + '&lt;/td&gt;' +
              '&lt;td&gt;' + 'tempDate' + '&lt;/td&gt;' +
              '&lt;td&gt;' +
                  '&lt;div class="btn-group"&gt;' +
                          '&lt;button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;"&gt;' +
                              '&lt;span&gt;Actions&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;' +
                          '&lt;/button&gt;' +
                          '&lt;ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;"&gt;' +
                          '&lt;li&gt;&lt;button class="btn btn-primary"&gt;View&lt;/button&gt;&lt;/li&gt;' +
                          '&lt;br&gt;' +
                          '&lt;li&gt;&lt;button class="btn btn-warning"&gt;Edit&lt;/button&gt;&lt;/li&gt;' +
                          '&lt;br&gt;' +
                          '&lt;li&gt;&lt;button class="btn btn-danger" id="deleteBowl"&gt;Delete&lt;/button&gt;&lt;/li&gt;' +
                          '&lt;/ul&gt;' +
                  '&lt;/div&gt;' +
              '&lt;/td&gt;' +       
          '&lt;/tr&gt;';
          $("#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();
  }
  </code></pre>
  
  <p>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?</p>