title: How to delete a table row using a separate button in js
body: <p>So I am creating a table where I need to be able to delete a row when I focus on the input field inside a cell using a button outside the table</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div tabindex="0" class="remove_row" role="button" onclick="removeRow()"&gt;
    &lt;span&gt;Remove&lt;/span&gt;
  &lt;/div&gt;
  &lt;table id="ListTab" role="grid"&gt;
    &lt;thead tabindex="0"&gt;
      &lt;tr role="row"&gt;
        &lt;th title="Column 1" role="columnheader"&gt;
          &lt;span&gt;Column 1&lt;/span&gt;
        &lt;/th&gt;
        &lt;th title="Column 2" role="columnheader"&gt;
          &lt;span&gt;Column 2&lt;/span&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody tabindex="0"&gt;
      &lt;tr class="UiListRow"&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="UiListRow"&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="UiListRow"&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
        &lt;td tabindex="-1" role="gridcell"&gt;
          &lt;input type="text" autocomplete="off"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want when the user stand on one of the inputs and clicks remove it only removes that row.</p>