**Goal**: Hovering over table row `<tr>` causes a button to become visible to the right of the `<tr>` element (outside of the table). Clicking this button deletes the row.

I'm struggling with the CSS and the mechanics of showing the button. I find I am able to create the desired button hide/show behavior on a `<div>` tag, but I can't figure out how to implement it within a table.

[See fiddle here](https://jsfiddle.net/u2yvvxz2/10/).

The actual deleting of the row is fairly straightforward to me...

```
$('table tr input').click(function(e) {
  var answer = confirm("Delete row?")
  if (answer) {

   var ind=$(this).closest('td').parent()[0].sectionRowIndex;
   $("tr:eq("+ind+")").remove();

  } else {
    //some code
  }

});

```