附加然后使用jQuery删除元素

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 (ie $() ) 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.

Answer 2

​$("#foo").on("mouseenter mouseleave", function(e){
    e.type === "mouseenter"
        ? $("#bar").appendTo(this)
        : $("#bar", this).remove() ;
});​

Fiddler: http://jsfiddle.net/AzEnm/1/