title: JQuery - Delete table row if delete button is clicked
body: <p>I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>function onload(){
  $("#addbutton").on("click",addRow);
  
  $(".delete").onclick(function(){
     $(this).closest('tr').remove(); 
  });
  
      var i = 1;
  
      function addRow(){        
          var newRow = "&lt;tr rowID='" + i + "'&gt;"+"&lt;td&gt;&lt;div&gt;"+$("#namebox").val()+
                      "&lt;/div&gt;&lt;/td&gt;"+"&lt;td&gt;&lt;div&gt;"+$("#surnamebox").val()+"&lt;/div&gt;&lt;/td&gt;"+"&lt;td&gt;&lt;div&gt;"+$("#agebox").val()+"&lt;td&gt;&lt;div&gt;&lt;button id='" + i + "' class='delete' name='delete'type='button'&gt;DELETE&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;"+"&lt;td&gt;&lt;div&gt;&lt;button class='edit' name='edit'type='button'&gt;EDIT&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;"+ i + "&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;"; //Adds the row with content and 
                              // buttons
          $(newRow).appendTo("#maintable"); //Append the new row
              // to the table
          // Next three commands clear the input boxes
          $("#namebox").val('');
          $("#surnamebox").val('');
          $("#agebox").val('');
          // Add to the numer of rows in the table
          i++;
      }// addRow END
  };
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Memory-Only Database&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
  ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="onload()"&gt;
  &lt;div id="header"&gt;
      &lt;h2&gt;Memory-Only Database&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="input-table"&gt;
  &lt;table id="maintable" style="width: 60%"&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Surname&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th id="buttons1"&gt;buttons1&lt;/th&gt;
          &lt;th id="buttons2"&gt;buttons2&lt;/th&gt;
          &lt;th id="counter"&gt;counter&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input id="namebox" name="name" type="text" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input id="surnamebox" name="surname" type="text" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input id="agebox" name="age" type="number" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;button id="addbutton" name="add" type="button"&gt;ADD&lt;/button&gt; 
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/div&gt;
      &lt;/body&gt;    
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{
   background-color: darkcyan;
  }
  
  div#header{
   position: relative;
   left: 30em;
   width: 18em;
   text-align: center;
  }
  div#input-table{
   width:50em;
  }
  
  table,th,tr,td{
   border: 1px solid black;
   border-collapse: collapse;    
  }
  
  td{
  text-align: center;
  }
  
  th#buttons{
  width: inherit;
   }
  </code></pre>