title: Delete selected rows from HTML Tables
body: <p>I am trying to delete selected rows (via checkbox) but I don't understand where I am going wrong  </p>
  
  <p>this is my code </p>
  
  <p>JQuery</p>
  
  <pre><code>$("#delete").click(function(){
      $("table input[type ='checkbox']:checked").parent().parent().remove();
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class = "patientData"&gt;
      &lt;div class ="searchBar"&gt;
          &lt;input type = "search" name = "search" class = "search"&gt;
          &lt;a href="#"&gt;&lt;i class ="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;button id = "delete"&gt;Delete Selected&lt;/button&gt;
      &lt;/div&gt;
      &lt;table style ="width:95%" class = "Info"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;input type="checkbox" id="select"&gt; &lt;/th&gt;
              &lt;th&gt; Name&lt;/th&gt;
              &lt;th&gt;Number&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The user enters the rows which is why my table by default only has headings. I have stuck on this for a while now and no research is helping me solving the problem. </p>
  
  <p>Please help if anyone can, Thanks in advance.</p>