Question

Trying to append an element on mouseenter then remove the same element on mouseleave.

$(#foo).mouseenter(function (){
    $(this).append(#bar);
});
$(#foo).mouseleave(function (){
    $(this).remove(#bar);
});

Doesn’t work, am I doing something wrong?

Answer 1

Not quoting string literals appears to be the most obvious thing. Have you tried:

$("#foo").mouseenter(function (){
    $(this).append("#bar");
});
$("#foo").mouseleave(function (){
    $(this).remove("#bar");
});

jQuery’s element-selector function (i.e. $()) expects a string containing a CSS-style selector, like ".someClass" or "#someId" or "div span.label". Passing those things without quotes around them is a syntax error.