Question

Fiddle

What I have now is almost good, but when you move the mouse along a table row, the button gets removed for some reason, which I don’t want. I only what the button to be removed if you mouseout of the whole table.

HTML: Looks like any old table with 3 columns and 12 rows + a <thead> with 3 columns.

JS:

$(document).ready(function(){
    $('#editData tr').hover(function(){
        $('button').remove();
        $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

CSS:

#editData {
  width: 500px;
  margin: auto;
  background: #dadce1;
  margin-bottom: 50px;
  box-shadow: 0 0 10px 1px #e1e1e1;
}
#editData tbody {
  border: 1px solid #b8b8b8;
  border-top: 0;
}
#editData thead {
  border: 1px solid #b8b8b8;
  border-bottom: 0;
  background: rgba(255,255,255,0.7);
  font-size: 20px;
}
#editData thead th {
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
#editData th:last-child, #editData tr td:last-child {
  width: 40px;
}
#editData tr {
  text-align: center;
  height: 30px;
}
#editData td {
  padding: 3px;
}
#editData tr:nth-child(even) {
  background: rgba(255,255,255,0.7);
}
#editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
}

Answer 1

Using the second parameter .hover. This will attach a mouseleave handler to your rows (tr).

$('#editData tr').hover(function(){
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
}, function() {
    $('button').remove();
});

Fiddle

Basically, just balanced your mouseenter and mouseleave handlers for the rows.

---

Also if you’re interested in knowing the real issue, read about mouseout vs mouseleave (demo at bottom of the page).

The problem is, mouseout bubbles up so every time it fires in any descendant of the table, it will bubble up to the table element and trigger its mouseout handler.

From the mouseout docs:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

---

hover is just a shorthand that attaches mouseenter and mouseleave handlers, you could explicitly use mouseleave instead of mouseout in your original example and it’d work as well:

$('#editData tr').mouseenter(function(){
    $('button').remove();
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
});
$('#editData').mouseleave(function(){
    $('button').remove();
});

Fiddle

This second piece of code is what you asked for: it removes all buttons when you mouseleave the table, while the first is my refactored version that appends a button when you mouseenter the row and removes it when you mouseleave it. Both have the same visible effect.

---

Side-note: I’ve replaced the hover by mouseenter in the example as .hover would unnecessarily attach the handler to both mouseenter and mouseleave events when called with a single argument.

With .hover, the mouseleave for the tr would remove the button and create a new one and, when you move the mouse to outside the table, the event would bubble up to the table element removing the just-created button, or if you move the mouse to another row, the handler would also be called twice (mouseleave of old row and mouseenter of the new hover target row). Of course this is not visible as these handlers would execute in microseconds and browsers may group up repaints. You can see that it is what actually happens with some console.logs in this fiddle.

This may not make much difference in this use-case (except performance) but in many other cases you may run into issues – many questions on SO are because questioners thought that .hover() called with a single argument would attach solely a mouseenter handler which is not the case.

ps. I aimed this answer at your event bubbling/logic problem, but you don’t have to abuse jQuery for something as simple as that. @Daryl Ginn’s answer is a very suitable solution for real-world use. =]