title: Using a button in a table to remove that specific row
body: <p>I am building a diary to store my running times, dates and distances. I current have this which is a table with 3 columns of data and a button to append the information stored in the data fields to the next row of the table.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;Running Diary&lt;/title&gt;
  &lt;link type = "text/css" rel = "stylesheet" href= "running.css"/&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt; 
  &lt;script src ="running.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  &lt;!-- Title at the top of page !--&gt;
      &lt;h1 id = "title"&gt; Running Diary &lt;/h1&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;!-- Table containing text/date fields and the entries for a running diary. !--&gt;
      &lt;table id = "diary"&gt;
  
  &lt;!-- Column titles for the running diary !--&gt;
          &lt;thead id = "diaryHeader"&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Distance Ran (KM)&lt;/th&gt;
              &lt;th&gt;Time&lt;/th&gt;
              &lt;/th&gt;
          &lt;/thead&gt;
  
  &lt;!-- The table row that contains the text field and enter button for adding each entry to the diary !--&gt;
          &lt;tbody&gt;
              &lt;tr id = "diaryFields"&gt;
                  &lt;td&gt; &lt;input type="date" id="dateField"/&gt;&lt;/td&gt;
                  &lt;td&gt; &lt;input type="number" id="distanceField" placeholder="Distance"/&gt; &lt;/td&gt;
                  &lt;td&gt; &lt;input type="text" id="timeField" placeholder="HH:MM:SS"/&gt; &lt;/td&gt;
                  &lt;td&gt; &lt;input type="submit" value="Add" id="diarySubmit"/&gt;
  
              &lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and the JS:</p>
  
  <pre><code>$(document).ready(function(){   
  
  //This handles the click function for diarySubmit button
      $("#diarySubmit").on('click', function(){
  //Taking values from each textbox
          var distanceRan = $('#distanceField').val(); 
          var timeRan = $('#timeField').val();
          var dateRan = $('#dateField').val();
  //creating the new row to be added with a button to clear the entry 
          var new_row =  '&lt;tr&gt;&lt;td&gt;'+distanceRan+'&lt;/td&gt;&lt;td&gt;'+timeRan+'&lt;/td&gt;&lt;td&gt;'+dateRan+'&lt;/td&gt;'+'&lt;td&gt;'+'&lt;button id="clearRow"&gt;Clear Entry'+'&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;'
          $('#diary').append(new_row);
          });
  });
  </code></pre>
  
  <p>How do I make the '#clearRow' button remove the table row that it is nested inside?</p>
  
  <p>I have come up with this piece of code, but it doesn't work properly, any help please?</p>
  
  <pre><code>$('#clearRow').on('click', function(e){
     $(this).closest('tr').remove()
  });
  </code></pre>