Добавить, затем удалить элемент с помощью jQuery

Question

Попытка добавить элемент в mouseenter, затем удалить тот же элемент на mouseleave.

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

Не работает, я делаю что-то неправильно?

Answer 1

Непонятные строковые литералы, по-видимому, являются наиболее очевидными. Вы пробовали:

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

функциональный элемент-селектор JQuery (в то $()) ожидает строку, содержащую селектор CSS-стиль, как ".someClass" или "#someId" или "div span.label". Передача этих вещей без кавычек вокруг них является синтаксической ошибкой.

Answer 2

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

Скрипач: http://jsfiddle.net/AzEnm/1/