Which mouseover handler is better? I'm currently learning some jQuery and I am stuck on something. On a small exercise I did, I was asked to perform an action when you mouseover a div class.  I gave a different solution than the one suggested and I was wondering which one is written best and why.

HTML code

&lt;tr id ='user_1' class='datarow'&gt;
   &lt;td&gt;&lt;input class='data' type='text' name='firstname' value='Firstname 1'&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input class='data' type='text' name='lastname' value='Lastname 1'&gt;&lt;/td&gt;
   &lt;td class='deletecell'&gt;&lt;div class='success'&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;


Here is my solution:

$(document).on('mouseover', '.success', function() {
    $(this).removeClass('success').addClass('delete');
});


And here is his solution:

$(document).on('mouseover', '.deletecell', function() {
    $('.success', this).addClass('delete').removeClass('success');
});


PS: Does it matter if addClass is first and removeClass is second?
Yours is simpler and therefore better.  However, I would simplify it further as:

$('.success').on('mouseover', function() {
    $(this).removeClass('success').addClass('delete');
});


Is shouldn't matter much whether you call .addClass() first or .removeClass() first.